⼩程序通过id从列表页跳转到对应的详情页
从列表页通过id跳转到对应的商品详情页,可以使⽤ navigator来跳转链接,也可以绑定函数来实现。
直接使⽤navigator跳转
<block wx:for="{{productList}}" wx:key="productId">
<navigator url="/pages/good-detail/good-detail?productId={{item.productId}}">
<view class="item" hover-class="item-hover">
{{item.name}}
</view>
</navigator>
</block>
使⽤绑定⽅法
wxml
<block wx:for="{{productList}}" wx:key="productId">
<view class="item" hover-class="item-hover" bindtap="toDetail" data-productid="{{item.productid}}">
{{item.name}}
</view>
</block>
js
//跳转到详情
toDetail: function(e){
console.log(e)
let productId = e.currentTarget.dataset.productid
wx.navigateTo({
url: '../good-detail/good-detail?productId='+productId,
})
}
详情页中获取传递过来的参数
onLoad: function (options) {
//页⾯初始化 options为页⾯跳转所带来的参数
console.log(options)
var id = options.productId
},
注意点:
1、在wxml中的block标签并不是⼀个组件,它仅仅是⼀个包装元素,不会在页⾯中做任何渲染,只接受控制属性。
navigator标签2、通过wxml设置data-[参数名]传递参数,[参数名]只能是⼩写,不能有⼤写。如果在wxml中是⼤写,⽆法获取,打印查看转为⼩写的了。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。