小程序携带参数跳转到页面详情页（附源码）

小程序携带参数跳转到页面详情页（附源码）

1.vxml在你需要跳转的按钮或者图片中绑定bindtap的内容，data-是需要跳转的参数的，其中的id为你想要跳转的参数。{}中的为跳转后携带的值。

<view class="body_left">
    <image src="/image/pause.png" bindtap="goPaly" data-id="{
    
    {item.id}}"></image>
  </view>

2.js页面中通过固定语句语法e.currentTarget.dataset为语法，其中在后面加入你的跳转参数。然后通过微信的wx.navigateTo进行跳转。其中在URL的路径中问好前面的为你需要跳转的路径，后面的为跳转的参数以及携带的值

goPaly(e){
    
    
  var id=e.currentTarget.dataset.id
  var ids=[]
  for(var i=0;i<this.data.songs.length;i++){
    
    
     ids.push(this.data.songs[i].id);
  }
  console.log('点击了',ids)
  wx.navigateTo({
    
    
    url: '/pages/palyMusic/palyMusic?id='+id+'&ids='+ids,
  })
},

3.跳转页面的接受数据js，通过页面的监听函数onLoad函数进行页面的接受。options来接受数据

onLoad: function (options) {
    
    
    // 接受id
    var id=options.i
    this.setData({
    
    
      id:id
    })
  },

以上是本人的学习经验，希望可以帮助更多的人。