您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序中如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
類(lèi)似 Android 的 Intent 傳值,微信小程序也一樣可以傳值:
例如:wxml 中寫(xiě)了一個(gè)函數(shù)跳轉(zhuǎn):
<view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任務(wù)</view> <view class="containVertical textNum">{{finishedMissionCount}}</view> </view>
在 js 代碼中寫(xiě):其中,url 是跳轉(zhuǎn)的相對(duì)路徑,?問(wèn)號(hào)后面加的是參數(shù),以 key-value 的方式,
這里傳了個(gè) value 為 2 的參數(shù)過(guò)去
//跳轉(zhuǎn)到已結(jié)束任務(wù)列表頁(yè) jumpToOverMissionList:function(){ wx.navigateTo({ url:"mission/missionList/missionList?type=2" }); },
然后在 missionList.js 中的 OnLoad()方法得到值:option.type 就可以得到了
onLoad: function(option) { this.setData({ type:option.type, }); console.log(option.type); }
頁(yè)面跳轉(zhuǎn)
今天嘗試了下小程序點(diǎn)擊頁(yè)面跳轉(zhuǎn),有兩種方式:navigator 組件跳轉(zhuǎn)和添加點(diǎn)擊事件跳轉(zhuǎn)。
navigator 組件跳轉(zhuǎn)
和 a 標(biāo)簽跳轉(zhuǎn)差不多,給 navigator 添加要跳轉(zhuǎn)到的 url 地址即可(這里需要注意下,我們?cè)谑褂梦⑿?web 開(kāi)發(fā)者工具按 enter 自動(dòng)補(bǔ)全時(shí)生成的組件有錯(cuò),navigator 閉合標(biāo)簽的“/” 位置應(yīng)該是在 navigator 前,而自動(dòng)生成的是<navigator/>,導(dǎo)致編譯報(bào)錯(cuò),同樣的還有 image 組件等)
<span > <navigator url="../logs/logs">點(diǎn)擊跳轉(zhuǎn)到 logs 頁(yè)面</navigator> </span>
為組件綁定跳轉(zhuǎn)事件
index.wxml 中為 image 綁定事件
<span > <image src="{{item.imgsrc}}" bindtap="tz"></image> </span>
index.js 文件中添加跳轉(zhuǎn)方法:
<span >tz: function(){ wx.navigateTo({ url: '../logs/logs', success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }</span>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序中如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞功能”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。