小程序实现列表和详情页
想实现如下的功能:
使用列表展示数据、点击列表中的条目,跳转到详情页。
我目前掌握的做法是:
在列表元素中增加data-id属性,用来存放唯一标识,然后传递参数到详情页。
下面的官方文档解释:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
每个列表元素要有一个可以进行定位的值,这里就是data-id
列表页
<!--pages/shici/shici.wxml-->
<mp-cells ext-class="my-cells" title="诗词列表">
<mp-cell bindtap="onClick" wx:for="{{dataList}}" wx:key="_id" data-id="{{item._id}}" value="{{item.title}}" footer="{{item.author}}"></mp-cell>
</mp-cells>
onClick:function(e){
let myId = e.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/shicidetail/shicidetail?id=' + myId,
})
}
onLoad: function (options) {
console.log(options)
let myId = options.id;
}
列表详情页