发布于 2017-07-13 08:23:46 | 41 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的微信小程序入门,程序狗速度看过来!

小程序 微信小程序

微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。


这篇文章主要介绍了微信小程序 页面跳转传参详解的相关资料,并附简单实例,和实现效果图,需要的朋友可以参考下

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

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

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

   

代码如下:


<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> 

最终实现效果:

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



相关阅读 :
微信小程序 页面跳转传参详解
微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转传递值几种方法详解
详解微信小程序 页面跳转 传递参数
微信小程序 富文本转文本实例详解
微信小程序 合法域名校验出错详解及解决办法
微信小程序 使用腾讯地图SDK详解及实现步骤
微信小程序 数据交互与渲染实例详解
微信小程序 scroll-view隐藏滚动条详解
微信小程序 radio单选框组件详解及实例代码
微信小程序 欢迎界面开发的实例详解
微信小程序 wx.request(接口调用方式)详解及实例
最新网友评论  共有(0)条评论 发布评论 返回顶部
月排行榜

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务