微信小程序页面传多个参数跳转页面的实现方法


Posted in Javascript onMay 17, 2019

这里举例跳转两个参数 传递多少个也可以

微信小程序页面传多个参数跳转页面的实现方法

这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap

在index.js

微信小程序页面传多个参数跳转页面的实现方法

在 data 里我写的是假数据

在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印

console.log(e)

微信小程序页面传多个参数跳转页面的实现方法

这样我们就拿到了 传递的数据 然后进行定义等

微信小程序页面传多个参数跳转页面的实现方法

这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等

在跳转的详情页面的onload方法里面写

微信小程序页面传多个参数跳转页面的实现方法

我们打印上个页面传入的数据

微信小程序页面传多个参数跳转页面的实现方法

打印出上个页面传入的数据 在进行that.setData 就行了

wxml:

<view class='fast-container'>
 <block wx:for="{{fast}}" wx:key="fast">
  <view class='fast-row' bindtap='goIndexDetail' data-item="{{item}}" data-id="{{list}}">
    <view class='row-tou'>
      <image class='img' src='{{item.image}}'></image>
    </view>
    <view class='row-content'>
     <view class='text'>{{item.name}}</view>
     <view class='content'>{{item.summary}}</view>
    </view>
  </view>
 </block>
</view>

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 () {
 }
})

总结

以上所述是小编给大家介绍的微信小程序页面传多个参数跳转页面的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
js运动事件函数详解
Oct 21 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 #Javascript
JS简单数组排序操作示例【sort方法】
May 17 #Javascript
微信小程序云开发(数据库)详解
May 17 #Javascript
JS实现的自定义map方法示例
May 17 #Javascript
javascript异步编程的六种方式总结
May 17 #Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 #Javascript
angular4应用中输入的最小值和最大值的方法
May 17 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
完美解决AJAX跨域问题
2013/11/01 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python list转矩阵的实例讲解
2018/08/04 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
平面设计的岗位职责
2013/11/08 职场文书
保护环境的建议书
2014/03/12 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS