微信小程序 页面跳转传参详解


Posted in Javascript onOctober 28, 2016

 微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料。

刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教。今天来说下微信小程序怎么跳转和传参,话不多说直接上代码。

实现的功能是给列表增加点击功能传参到下一页;

    微信小程序 页面跳转传参详解

代码如下:

<import src="../WXtemplate/headerTemplate.wxml"/> 
<view> 
 <!--滚动图--> 
 <view> 
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoPlay}}" interval="{{intervalTime}}" duration="{{Time}}"> 
 <block wx:for="{{imageURl}}"> 
  <swiper-item> 
   <image src="{{item}}" class="imagePX"></image> 
  </swiper-item> 
 </block> 
 </swiper> 
 </view> 
 <!--功能按钮--> 
 <view class="section-bg"> 
 <block wx:for="{{buttonNum}}"> 
  <!--模版--> 
  <template is="buttonList" data="{{item}}"/> 
  <!--<view class="section-item"> 
  <image class="section-img" src="{{item.image}}"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view>--> 
 </block> 
 </view> 
 <!--资讯列表--> 
 <view> 
 <block wx:for="{{listNum}}"> 
  <template is="newList" data="{{item,index}}"/> 
 </block> 
  
 </view> 
 
 
 </view>

其中

<template is="buttonList" data="{{item}}"/> 

为模版代码如下

<template name="buttonList"> 
 <view class="section-item"> 
  <image class="section-img" src="{{item.image}}" bindtap="buttonClick"></image> 
  <text class="section-text">{{item.text}}</text> 
 </view> 
</template> 
 
<!--list--> 
<template name="newList"> 
 <view class="section-list" bindtap="listClick" id="{{index}}"> 
 <view> 
  <image class="list-img" src="{{item.image}}"></image> 
 </view> 
 
  <view class="section-textt"> 
  <view class="title"><text>{{item.title}}</text></view> 
  <view class="subTitle"><text>{{item.subTitle}}</text></view> 
 </view> 
 </view> 
 
</template>

这里只为下面的列表增加了点击方法

点击列表js代码

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'}) 
 }

其中

wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一页的参数'}) 

为跳转方法,id为需要传的参数 如果参数为动态参数代码如下: 

listClick:function(event){ 
 console.log(event); 
 var p = event.currentTarget.id 
 
 wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p}) 
 }

其中p为上面为每一行设置的id值

在下一页取值代码如下: 

data:{ 
 // text:"这是一个页面" 
 title:'' 
 }, 
 onLoad:function(options){ 
 // 页面初始化 options为页面跳转所带来的参数 
 this.setData({ 
 title:options.id 
 })

然后在页面上显示代码如下:

<view>{{title}}</view> 

最终实现效果:

微信小程序 页面跳转传参详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
jQuery的学习步骤
Feb 23 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
微信小程序 wx:key详细介绍
Oct 28 #Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 #Javascript
基于Layer+jQuery的自定义弹框
May 26 #Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
You might like
PHP输出时间差函数代码
2013/01/28 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php简单生成随机数的方法
2015/07/30 PHP
php7下的filesize函数
2019/09/30 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
javascript如何写热点图
2015/12/08 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python3 replace()函数使用方法
2018/03/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
教师校本培训方案
2014/02/26 职场文书
青年文明号创建承诺
2014/03/31 职场文书
工程安全生产协议书
2014/11/21 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
诉讼和解协议书
2016/03/23 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
详解nodejs内置模块
2021/05/06 NodeJs