這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)傳參詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例，和實(shí)現(xiàn)效果圖，需要的朋友可以參考下
微信小程序 頁(yè)面跳轉(zhuǎn)傳參，做微信小程序必定會(huì)用的這樣的功能，這里就記錄下本人學(xué)習(xí)實(shí)現(xiàn)代碼資料。
剛接觸微信小程序，多里面的語(yǔ)法和屬性還不怎么聊解，如有不多的地方希望各位大神多多指教。今天來(lái)說(shuō)下微信小程序怎么跳轉(zhuǎn)和傳參，話不多說(shuō)直接上代碼。
實(shí)現(xiàn)的功能是給列表增加點(diǎn)擊功能傳參到下一頁(yè)；
代碼如下：
<import src="../WXtemplate/headerTemplate.wxml"/>
<view>
<!--滾動(dòng)圖-->
<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>
這里只為下面的列表增加了點(diǎn)擊方法
點(diǎn)擊列表js代碼
listClick:function(event){
console.log(event);
var p = event.currentTarget.id
wx.navigateTo({url:'/pages/xiangqing/xiangqing?id=上一頁(yè)的參數(shù)'})
}
其中
wx.navigateTo({url:’/pages/xiangqing/xiangqing?id=上一頁(yè)的參數(shù)’})
為跳轉(zhuǎn)方法，id為需要傳的參數(shù) 如果參數(shù)為動(dòng)態(tài)參數(shù)代碼如下：
listClick:function(event){
console.log(event);
var p = event.currentTarget.id
wx.navigateTo({url:'/pages/xiangqing/xiangqing?id='+p})
}
其中p為上面為每一行設(shè)置的id值
在下一頁(yè)取值代碼如下：
data:{
// text:"這是一個(gè)頁(yè)面"
title:''
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
this.setData({
title:options.id
})
然后在頁(yè)面上顯示代碼如下：
{{title}}
最終實(shí)現(xiàn)效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序 頁(yè)面跳轉(zhuǎn)傳參的介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注有卡有網(wǎng)。
