本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法。分享给大家供大家参考,具体如下:
很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面。
一、效果图
从左边的列表页调到右边的详情页
二、页面之间的跳转
首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择:
1、保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack
可以返回到原页面。
wx.navigateTo({ url: 'test"htmlcode">wx.redirectTo({ url: 'test"htmlcode">wx.switchTab({ url: '/index' })注:
wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages())
获取当前的页面栈,决定需要返回几层。三、从列表item项跳转到下一个页面
第一步,渲染列表,在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>第二步,使用wx:key为列表中的项目绑定标识符
<view wx:for="{{array}}" wx:key="{{item.viewid}}"> {{index}}: {{item.message}} </view>第三步,为每一个item对应的链接传递相应的参数,在布局页面使用navigator导航组件,指定url并为每一个item对应的链接传递相应的参数,在URL后面跟上"htmlcode">
url="../detail/detail"四、demo源码
<view wx:for="{{words}}" wx:key="{{item.viewid}}"> <navigator url="../detail/detail"> <view class="item-style">{{item.name}}</view> </navigator> </view>Page({ data: { words: [{message: '微信小程序',viewid:'1',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'2',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'3',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'4',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'5',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'6',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'7',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'8',time:'2017-01-09 8:00:00',money:'hello'}, {message: '微信小程序',viewid:'9',time:'2017-01-09 8:00:00',money:'hello'}] } ... })希望本文所述对大家微信小程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 陈慧娴.1996-雪映美白96演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 王子异《1996 Part.2》[FLAC/分轨][50.66MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[320K/MP3][155.91MB]
- 贵族音乐《古典名曲与轻音乐钢琴 打开宝宝睡眠开关》[FLAC/分轨][251.78MB]
- 黄韵玲2001-巴结音乐[全员集合][WAV+CUE]
- 郑绪岚2015-流金岁月·精选[首版][WAV+CUE]
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-48]FLAC
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]