微信小程序列表页点击数据传值到详情页

最新推荐文章于 2023-02-14 17:31:31 发布
最新推荐文章于 2023-02-14 17:31:31 发布
阅读量1.3k 收藏 18
点赞数 6
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44003156/article/details/113129000
版权

列表页

传值到详情页

列表页：跳转时携带数据：　 url: '/pages/test2/test2?数据a的名称=' + 数据a的内容 + '&数据b的名称=' + 数据b的内容, 

详情页：

也可以：

扩展：（当详细页是不需要数据传递是可以添加判断条件）

遇到的坑：

当不使用JSON.parse时，传过来的数据是这样的

但是单独在详情页使用JSON.parse会报错

所以在列表页也使用JSON.stringify

当不使用JSON.parse时

传过来的数据是这样的

当不使

当不使用JSON.parse时

传过来的数据是这样的

用JSON.parse时

传过来的数据是这样的

September8
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序中子页面向父页面传值实例详解
12-01
本实例将详细讲解如何在微信小程序中实现子页面向父页面传递值的方法，主要涉及到页面路由、API调用以及页面对象的操作。 首先，我们需要理解微信小程序的页面生命周期。每个页面在小程序中都有自己的生命周期，...
微信小程序 页面跳转如何实现传值
08-30
在微信小程序开发中，页面之间的数据传递是必不可少的操作。本文将详细介绍如何在微信小程序中实现页面跳转的同时传递参数，让读者了解两种常见的方法：通过URL参数传递和使用Page对象的生命周期方法。 （1）页面...
微信小程序传参列表页到详情页
Lladp的博客
02-28 547
列表页： <view wx:for="{{lists}}" wx:for-index="index" wx:for-item="item" wx:key="id" bindtap="jump" data-index="{{item}}"> data:{ lists:[ { id:'0', age:'0', name:'000' }, { id:'1', age:'1', name:'111' }, { id:'2', ag
微信小程序如何实现列表数据的详情页功能
浮生离梦的博客
03-13 8740
微信小程序点击列表页进入详情页，在列表页 list.wxml中，对于每一个数据项，可以通过 catchtap去绑定一个事件，去详情页的事件 toDetail。 对于详情页的传输数据，点击事件可以通过 data- 去实现，后面相当于是键值对，data-index="{{index}}"，意思是传输的值的名字叫index，值为 index，代码如下： <block wx:for="{{li...
微信小程序点击数据列表，进入列表详情页面的思路
Wang_kaiya的博客
10-21 3589
1.在index.wxml 通过 bindtap去绑定一个事件。 对于详情页的传输数据，点击事件可以通过 data- 去实现，后面相当于是键值对，data-id="{{item.id}}"，意思是把列表的id传过去。 <view class="goods"> <view wx:for="{{listTwo}}" wx:key="{{index}}" class="goods-list" bindtap="toDetail" data-id="{{item.id}}">
微信小程序之列表渲染后跳转详情页面（页面跳转带参数 和 js获取参数）
samHuangLiang的博客
01-18 5201
1.列表页面样式： &lt;view class="table"&gt; &lt;block wx:for="{{staffList}}" wx:key="{{index}}"&gt; &lt;view class="tr" bindtap="onStaffDetail" data-index='{{index}}'&gt;
微信小程序实现子组根据点击的列表id件向父组件操作数据渲染到另外一个详情页
m0_64000390的博客
02-14 403
微信小程序实现子组件向父组件传值并通过事件绑定操作父组件的数据渲染到第三个页面
微信小程序列跳详情用到的知识点data-
weixin_45764245的博客
06-14 250
通过data-命令获取点击所需要的数据如id或者商品名称 1.在商品 列表 页面wxml文件中执行 1.1将数据列表进行遍历渲染 1.2abc是点击回调函数是所带的数据 2.在商品列表页js文件中执行 2.1点击获取携带数据并跳转至详情页面 navigateTo官方文档 3.在商品详情页js文件中执行 3.1给跳转过来的参数赋值一个变量这里e.id是跳转成功时携带的数据 3.2将赋值的变量放入doc()中 3.3Good数据进行渲染 4.在商品详情页面wxml文件中 4.1渲染Good数据 注意：
微信小程序点击列表跳转到对应详情页过程解析
10-16
主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序实现页面跳转传值以及获取值的方法分析
08-28
微信小程序页面跳转传值获取值方法分析 微信小程序实现页面跳转传值和获取值是微信小程序开发中常见的需求。以下是微信小程序实现页面跳转传值和获取值的方法分析： 1. 设置ID方法标识来传值 在微信小程序中，...
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
01-03
本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法。分享给大家供大家参考，具体如下： 很多项目都会有消息记录页，即列表页，紧接着就是点击列表的某一项进入到消息的详情页，这里承接上一篇文章，继续分享如何从列表的item项跳转到下一个页面。 一、效果图 从左边的列表页调到右边的详情页 二、页面之间的跳转 首先要看的是页面的跳转，微信小程序有三种跳转方式可供选择： 1、保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 wx.navigateTo({ url: 'test?id=1' }) 2、关闭当前页面，跳转到应用内的某
微信小程序文章详情页跳转案例详解
10-16
主要介绍了微信小程序文章详情页跳转案例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序实现两个页面传值的方法分析
01-03
本文实例讲述了微信小程序实现两个页面传值的方法。分享给大家供大家参考，具体如下： 需求：发送页面通过url传值，接收页面获取值。 发送页面的js var nowid='10'; wx.navigateTo({ url: '../index/index?id='+...
微信小程序（四）：通过list列表跳转详情页
skye_95的博客
07-23 8429
1.难点：怎么知道用户点击的是list中的哪一条数据？ 方法一：在template外for循环里通过for循环的index获取 将index赋值到data-studentId，data-后面的变量名是不区分大小写的，获取值的时候只能用小写获取。 控制台根据我点击打印出来的index: 方法二：在template里通过for循环的index获取（与方法一类似，只是catchta...
微信小程序通过点击事件传参（data-）
Shids_的博客
06-28 2万+
微信小程序通过点击事件传参（data-）
小程序之动态获取列表对象详细信息
weixin_30279751的博客
10-23 1427
先上效果图展示： 本内容主要介绍如何在列表中去动态获取对象详情： 1.先展示列表内容： 列表内容仍然是通过数据绑定和聊表渲染来实现，wx:for的一系列参数设置。 <block wx:for="{{personList}}" wx:key="" wx:for-item="item"> <view class="nav_rig...
微信小程序之实现到商品列表跳转商品详情页
qq_47637405的博客
04-02 1万+
模仿京东小程序，实现下列功能。
微信小程序之点击列表的item带参数跳转界面
u013351340的博客
05-04 3万+
1.在js文件里写个界面跳转的事件处理函数gotableinfo，var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标，wx.navigateTo为小程序提供的界面路由跳转的方法，参数url为要跳转页面的连接（?后面为连接携带的参数） 2.data-index="{{index}}"为标记列表的下脚标，index
微信小程序——点击商品分类跳转到该商品的商品详情页面（已实现）
热门推荐
ansheng02的博客
08-15 4万+
首先，我不得不感慨下，慕课网上“7七月”老师的课真的很强大，此处放链接https://coding.imooc.com/learn/list/75.html。 我只是学习到了一半就开始自己尝试做一个商城的小程序，竟然真的被我完成了大部分。好吧，就这样，这个课明明还有一半，我竟然不听了…… 也不是不听，是我自己懒吧，能自己实现了，哈哈哈~这样还算是个...
微信小程序js方法互相调用传值
最新发布
05-18
微信小程序中，可以通过以下几种方式实现js方法互相调用传值： 1. 直接调用 可以直接通过函数名调用对应的方法，并将需要传递的参数作为参数传入。 例如，在页面A中定义一个方法： ``` function methodA(paramA) { console.log(paramA); } ``` 在页面B中调用该方法： ``` Page({ data: { paramB: 'Hello World!' }, onLoad: function () { var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.methodA(this.data.paramB); } }) ``` 2. 通过事件传递 在页面A中定义一个事件： ``` Page({ data: { paramA: '' }, onLoad: function () { this.triggerEvent('eventA', {paramA: this.data.paramA}); } }) ``` 在页面B中监听该事件并获取传递的参数： ``` Page({ data: { paramB: '' }, methods: { eventAListener: function (event) { this.setData({paramB: event.detail.paramA}); } } }) ``` 3. 通过全局变量 在app.js中定义一个全局变量： ``` App({ globalData: { param: '' } }) ``` 在页面A中存储需要传递的参数： ``` var app = getApp(); app.globalData.param = 'Hello World!'; ``` 在页面B中获取该参数： ``` var app = getApp(); console.log(app.globalData.param); ``` 以上三种方式都可以实现js方法互相调用传值，在实际开发中可以根据具体需求选择合适的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值