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


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 相关文章推荐
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
JavaScript仿京东轮播图效果
Feb 25 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Bootstrap table两种分页示例
2016/12/23 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python函数的5种参数详解
2017/02/24 Python
带你了解python装饰器
2017/06/15 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python实现随机漫步方法和原理
2019/06/10 Python
python编写猜数字小游戏
2019/10/06 Python
Django框架反向解析操作详解
2019/11/28 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
资料员的岗位职责
2013/11/20 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Redis 常见使用场景
2021/08/30 Redis