2018/5/26继上 2.2实现了 swiper 功能后,访问详细页肯定也是我们所需要的。本章将涉及 页面间的数据传递 和 事件相应相关内容1.前期准备创建 detial 详情页 并在 app.json 中注册1)扩增上一节的页面内容 太少了不好显示 testList: [ { name: “测试1”, element: “测试1的相关内容”, isHighLighted: true, des:’这是用来显示的内容—-测试1′, id: 1 }, { name: “测试2”, element: “测试2的相关内容”, des: ‘这是用来显示的内容—-测试2′, isHighLighted: false, id: 2 }],随便加点就行了2)写 detail.wxml 用来显示view textid:{{id}}/text text标题:{{name}}/text text元素:{{element}}/text text描述:{{des}}/text/view3)了解一下 微信切换页面的三个函数。因为和之前讲的 navigation 那一块极为类似,在此不重复。我们用最后一个。wx.switchTabwx.redirectwx.navigateTo2.绑定事件和数据在上一笔记的 swiper-item 中的 view 添加至如下 view class=’container’ bindtap=’f0′ data-id='{{item.id}}’ data-name='{{item.name}}’ data-des='{{item.des}}’data- 自定义的数据。会在事件中被封装在对象里。具体可以通过 event.getCurrentTarget.dataset来获取数据3.传递数据1)main.js 书写函数 f0: function (event) { var id = event.currentTarget.dataset.id var name = event.currentTarget.dataset.name var des = event.currentTarget.dataset.des wx.navigateTo({ url: ‘../detail/detail?id=’ + id + ‘&des=’ + des + ‘&name=’ + name, }) },切记:这边的 url 应是上述写法。否则会因为层级关系默认寻找 pages/main/ 目录下的文件navigateTo 中的 url 会根据页面 url 定向跳转 后面可以通过 “?” 带参2) detail.js onLoad 函数获取传入的信息 并赋值给 dataonLoad: function (options) { var id = options.id var name = options.name var des = options.des this.setData({ id:id, name:name, des:des, }) },4.显示
微信小程序学习笔记2.2实现详情页的访问
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序学习笔记2.2实现详情页的访问
相关推荐
51魅优购,实力打造微分销落地方案 – E企盈小程序富源县E企盈小程序招商代理
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务