微信小程序页面传多个参数跳转页面的实现
微信小程序页面传多个参数跳转页面的实现?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
乌苏网站建设公司创新互联建站,乌苏网站设计制作,有大型网站制作公司丰富经验。已为乌苏上1000+提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的乌苏做网站的公司定做!
index.js
在 data 里我写的是假数据
在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印
console.log(e)
这样我们就拿到了 传递的数据 然后进行定义等
这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等
在跳转的详情页面的onload方法里面写
我们打印上个页面传入的数据
打印出上个页面传入的数据 在进行that.setData 就行了
wxml:
{{item.name}} {{item.summary}}
index.js
Page({ /** * 页面的初始数据 */ data: { fast:[ //假数据 { 'name': 'red', 'image': '/img/123.jpg','summary':'我是红色'}, { 'name': 'green', 'image': '/img/123.jpg', 'summary': '我是绿色' }, { 'name': 'blue', 'image': '/img/123.jpg', 'summary': '我是蓝色' }, { 'name': 'orange', 'image': '/img/123.jpg', 'summary': '我是橘色' } ], list:[ //假数据 {'content':'content-red'}, { 'content': 'content-green' }, { 'content': 'content-blue' }, { 'content': 'content-orange' } ] }, // ----跳转详情页 goIndexDetail : function (e) { // console.log('我要传入的值e+++',e) let id = e.currentTarget.dataset.id; let item = e.currentTarget.dataset.item; console.log('我传入的data-id+',id,'我传入的data-item=',item) let str = JSON.stringify(id); let _str = JSON.stringify(item) wx.navigateTo({ url: '/pages/index/indexDetail/indexDetail?jsonStr=' + str + "&strr=" + _str, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
indexDetail.js
Page({ /** * 页面的初始数据 */ data: { detail: [], detailList, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this // console.log(options) // console.log(options.jsonStr) // console.log(options.strr) let item = JSON.parse(options.jsonStr) let id = JSON.parse(options.strr) console.log('上个页面跳转的data-item++', item) console.log('上个页面跳转的data-id++', id) that.setData({ detail: id, detailList: item }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
看完上述内容,你们掌握微信小程序页面传多个参数跳转页面的实现的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前标题:微信小程序页面传多个参数跳转页面的实现
地址分享:http://ybzwz.com/article/pohoio.html