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


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 相关文章推荐
document.all与WEB标准
May 13 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
详解Vue中watch对象内属性的方法
Feb 01 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
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php实现的生成排列算法示例
2019/07/25 PHP
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
node实现定时发送邮件的示例代码
2017/08/26 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
担保书格式及范文
2014/04/01 职场文书
车辆工程专业求职信
2014/04/28 职场文书
小学语文教研活动总结
2014/07/01 职场文书
工商管理本科生求职信
2014/07/13 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
VUE递归树形实现多级列表
2022/07/15 Vue.js