E企盈营销工具技术服务商 热线:4006-838-530

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

 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,本文承接上一篇博客,继续分享如何从列表的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,数组当前项的变量名默认为itemview wx:for="{{array}}"  {{index}}: {{item.message}}/v开通玻璃花瓶小程序电话:4006-838-530iew

第二步,使用wx:key为列表中的项目绑定标识符view wx:for="{{array}}" wx:key="{{item.viewid}}"  {{index}}: {{item.message}}/view

第三步,为每一个item对应的链接传递相应的参数,在布局页面使用navigator导航组件,指定url并为每一个item对应的链接传递相应的参数,在URL后面跟上?以及键值就行,多个参数用&连接,例如:url="../detail/detail?index={{item开通气泡膜小程序电话:4006-838-530.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:0开通司法车拍卖小程序电话:4006-838-5300',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'}]  }  ...})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【微信小宿迁E企盈小程序程序之页面跳转】从列表的item项跳转到下一个页面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏