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


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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
javascript屏蔽右键代码
May 15 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python机器学习之贝叶斯分类
2018/03/26 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
音乐教育感言
2014/03/05 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
门店店长岗位职责
2015/04/14 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript