微信小程序> 【微信小程序之页面跳转】从列表的item项跳转到下一个页面

【微信小程序之页面跳转】从列表的item项跳转到下一个页面

浏览量:546 时间: 来源:晚秋星辰
 

很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,本文承接上一篇博客,继续分享如何从列表的item项跳转到下一个页面。

一、效果图

从左边的列表页调到右边的详情页

二、页面之间的跳转

首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择:

1、保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

wx.navigateTo({  url: 'test?id=1'})

2、关闭当前页面,跳转到应用内的某个页面。

wx.redirectTo({  url: 'test?id=1'})

3、跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

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后面跟上?以及键值就行,多个参数用&连接,例如:

url="../detail/detail?index={{item.viewid}}"

四、demo源码

view wx:for="{{words}}" wx:key="{{item.viewid}}"    navigator url="../detail/detail?index={{item.viewid}}"        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'}]  }  ...})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎