Jumping from the list page to the corresponding product detail page by id, you can use the navigator to jump to the link, or you can bind the function to achieve.
Jump directly using 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>
Use the binding method
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,
})
}
Get the passed parameters in the details page
onLoad: function (options) {
//页面初始化 options为页面跳转所带来的参数
console.log(options)
var id = options.productId
},
Points to note:
1. It is not a component in wxml, it is just a packaging element, it will not do any rendering on the page, only accept control attributes.
2. Set data- [parameter name] through wxml to pass parameters. [Parameter name] can only be lowercase, not uppercase. If it is capitalized in wxml and cannot be obtained, the print view is converted to lowercase.
