微信小程序列表页跳转到详情页

描述:从列表页,点击不同列,跳转到相对应的详情页,在跳转的过程中需要传递id给详情页.

思路:列表页中,在.wxml页面里,在列标签上自定义一个id属性和一个点击事件;点击的时候触发点击事件 ,在.js文件中从这个点击事件的形参event中可以获取到自定义的id,使用wx.navigateTo({})实现路由跳转,在要跳转的路由后面用?号拼接id,将id传给详情页.在详情页调用详情页的接口就可以实现了

实现过程:

列表页:

.wxml页面:定义一个点击事件和自定义一个id属性,这里的id属性名是data-postId-idex ,属性值是primaryKey,primaryKey是从后端获取回来的每一列的唯一标识.

<view class="Announcement_content"><view class="Announcement_content_list list_border" wx:for="{{announcementList}}"bindtap="getDetail" data-postId-idex = "{{item.primaryKey}}" wx:for-item="item" wx:key="index"><text class="Announcement_content_list_titel">{{item.adAnnoName}}</text><view class="fire_time"><image wx:if="{{item.adAnnoTop == 1}}" src="../../compones/assates/imgs/huo.png"></image><text class="Announcement_content_list_time">{{item.adAnnoTime}}</text></view></view></view>

后端获取的数据是:

0:adAnnoAcce: ""adAnnoEmp: "76070427031121119"adAnnoName: "小区绿化杀虫"adAnnoStatus: 1adAnnoText: "小区绿化杀虫"adAnnoTime: "-06-01"adAnnoTop: "1"adAnnoType: 0companyId: 76companyName: "海山金谷天城"employee: nullimages: []isHaveImage: "1"lastmodiDate: "-06-01 11:05:08"lastmodiId: "76070427031121119"orderNumber: "6674B1AN06010002"orderPriority: ""primaryKey: 651publisher: ""recordDate: "-06-01"recordId: "76070427031121119"serviceName: "曾惠虹"views: 6

.js文件中:

这里的url是要跳转到的详情页的路径,路径必须是绝对路径;这里拼接了唯一表示event.currentTarget.dataset.postidIdex.

getDetail:function(event){console.log("event")console.log(event)wx.navigateTo({url: '../../pages/AnnouncementDetails/inAnnouncementDetailsdex?postidIdex='+ event.currentTarget.dataset.postidIdex,})},

详情页:在data中定义primaryKey存放从列表页传过来的唯一表示,onLoad: function (options){}中的options接收了列表页传过来的唯一表示,将这个唯一表示存到data中的primaryKey中,然后调后端给的接口,将唯一表示传给后端,然后做页面渲染即可.

data: {primaryKey:'',Detail:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('11111')console.log(options)this.setData({primaryKey:options.postidIdex})var _that =thiswx.request({url: '后端给的接口', method:'POST',data: {"primaryKey":this.data.primaryKey,},header: {'content-type': 'application/x-www-form-urlencoded'},dataType:'json',success: function(res) {console.log("resssssss")console.log(res)_that.setData({Detail:res.data.list})}})},

参考文章:/weixin_41804429/article/details/81174230