|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名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> 最終實現效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是微信小程序 頁面跳轉傳參的介紹的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!