微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法


Posted in Javascript onNovember 27, 2017

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法。分享给大家供大家参考,具体如下:

很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的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,数组当前项的变量名默认为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'}]
 }
 ...
})

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
You might like
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
程序员编程十条戒律
2009/07/09 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
YII框架常用技巧总结
2019/04/27 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python list语法学习(带例子)
2013/11/01 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python实现随机漫步功能
2018/07/09 Python
Python3爬虫学习入门教程
2018/12/11 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2015年春节标语口号
2014/12/09 职场文书
总结会主持词
2015/07/02 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
选购到合适的激光打印机
2022/04/21 数码科技
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android