微信小程序文章跳转到相应页面实现

微信小程序文章跳转到相应页面实现

效果：

1.为文章标题栏添加自定义点击事件，使得点击文章标题可跳转到对应的文章详情页

<view class="row" wx:for="{{dataList}}"
wx:key="index"
bindtap="getShow"//绑定自定义点击事件
data-id="{{item._id}}">//绑定id号作为跳转的参数

2.在点击事件中

getShow(e){
let id=e.currentTarget.dataset.id
wx.navigateTo({
  url: '../show/show?id='+id//跳转的页面和参数
})

3.详情页面的js
处理收到的id参数

 onLoad: function (options) {
  var id=options.id//接收上一个页面传来的id
  this.getOne(id)
  },
  getOne(id){//以传过来的id参数作为依据在新页面获取对应的数据
  db.collection("Art").doc(id).get().then(res=>{
  this.setData({
    oneData:res.data
  })
  })
  }

4.详情页面wxml

<text>{{oneData.content}}</text>//获取到数据后进行渲染