微信小程序页面跳转功能之从列表的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 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
异步加载script的代码
2011/01/12 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
js创建数组的简单方法
2016/07/27 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
PyQt5每天必学之布局管理
2018/04/19 Python
python3实现磁盘空间监控
2018/06/21 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
党课学习思想汇报
2014/01/02 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS