小程序——页面跳转

场景:点击首页中的具体商品,携带商品ID跳转到商品详情页面,在详情页面获取并且展示商品详细信息。

实现步骤:以瀑布流组件为例。

1、在组件的最外层view标签上定义 data-pid="{{data.id}}" 其中“data-”为固定格式,“pid”可以根据业务需求命名。

2、在组件的最外层view标签上使用 bind:tap="onItemTap" 绑定“onItemTap”事件。

3、在瀑布流组件的js文件的方法列表中实现onItemTap事件,该事件接收event对象。通过语句 event.currentTarget.dataset.pid; 可以获取组件data-pid中绑定的数据,event.currentTarget.dataset中的pid应该与第一步中的“data-”后面的pid一致。

4、使用语句 wx.navigateTo({ url:`/pages/detail/detail?pid=${pid}` }); 跳转至商品详情页面。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容