這篇文章主要介紹了微信小程式頁面跳轉傳參詳解的相關資料,並附簡單實例,和實現效果圖,需要的朋友可以參考下
微信小程式頁面跳轉傳參,做微信小程式必定會用的這樣的功能,這裡就記錄下本人學習實現程式碼資料。
剛接觸微信小程序,多裡面的文法和屬性還不怎麼聊解,如有不多的地方希望各位大神多多指教。今天來說下微信小程式怎麼跳轉傳參,話不多說直接上程式碼。
實現的功能是為清單增加點選功能傳參到下一頁;
#
程式碼如下:
<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 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 })
然後在頁面上顯示程式碼如下:
#
#最終實作效果:
以上是微信小程式頁面跳轉傳參詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!