从列表页通过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中 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
2、通过wxml设置data-[参数名]传递参数,[参数名]只能是小写,不能有大写。如果在wxml中是大写,无法获取,打印查看转为小写的了。