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


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 相关文章推荐
js播放wav文件(源码)
Apr 22 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 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中上传大体积文件时需要的设置
2006/10/09 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
基于node实现websocket协议
2016/04/25 Javascript
详解jQuery中的事件
2016/12/14 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python中的格式化输出用法总结
2016/07/28 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python count函数使用方法实例解析
2020/03/23 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
解决c++调用python中文乱码问题
2020/07/29 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
创业计划书的写作技巧及要点
2014/01/31 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
师德师风自我评价范文
2014/09/11 职场文书
检讨书1000字
2014/10/11 职场文书
队名及霸气口号大全
2015/12/25 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python