|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過(guò)將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者生態(tài)。 這篇文章主要介紹了微信小程序 頁(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 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>這里只為下面的列表增加了點(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è)面上顯示代碼如下: <view>{{title}}</view> 最終實(shí)現(xiàn)效果:
以上就是微信小程序頁(yè)面跳轉(zhuǎn)傳參詳解的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!