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


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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jquery插件validate验证的小例子
May 08 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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程序的多种方法介绍
2014/11/06 PHP
php文件缓存类汇总
2014/11/21 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php实现可运算的验证码
2015/11/10 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Django内容增加富文本功能的实例
2017/10/17 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python实现自动访问网页的例子
2020/02/21 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
C#面试题问题集
2016/04/02 面试题
2014年师德师风自我剖析材料
2014/09/27 职场文书
微观世界观后感
2015/06/10 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
小学作文之描写天气
2019/08/15 职场文书