小程序实现列表和详情页

想实现如下的功能:
使用列表展示数据、点击列表中的条目,跳转到详情页。

我目前掌握的做法是:
在列表元素中增加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;
    }

列表详情页

posted @ 2022-07-20 21:51  叶常落  阅读(6)  评论(0编辑  收藏  举报  来源