《逻辑006:页面跳转并传参》
描述:在开发小程序过程中,发现一些不错的案例,平时使用也比较多,稍微总结了下经验,以下内容可以直接复制使用,希望对大家有所帮助,废话不多说直接上干货!
一、页面跳转并传参
点击一个view跳转到另一个页面,并将当前view的index索引传入到详情页面,详情页面并使用。用代码实现
<!-- index.wxml -->
<view data-index="{{index}}" bindtap="goToDetail">点击跳转到详情页</view>
// index.js
Page({goToDetail: function(event) {var index = event.currentTarget.dataset.index; // 获取当前view的index索引wx.navigateTo({url: '/pages/detail/detail?index=' + index // 跳转到详情页并传递index参数})}
})//方法1:使用的是page类型,detail.js
Page({onLoad: function(options) {var index = options.index; // 获取传入的index参数// 在这里使用传入的index参数}
})//方法2:使用的是Component类型,detail.jsComponent({//组件的属性列表properties: {},//组件的初始数据data: {},pageLifetimes: {show: function () {var index = this.index; // 获取传入的index参数},}})//方法3:首次加载方法
Component({lifetimes: {attached: function() {// 组件首次加载时执行的操作console.log('Component attached');}},methods: {// 其他方法}
});