微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
微信小程序 頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
類似 Android 的 Intent 傳值,微信小程序也一樣可以傳值:
例如:wxml 中寫了一個(gè)函數(shù)跳轉(zhuǎn):
<view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任務(wù)</view> <view class="containVertical textNum">{{finishedMissionCount}}</view> </view>
在 js 代碼中寫:其中,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 style="font-size:14px;"> <navigator url="../logs/logs">點(diǎn)擊跳轉(zhuǎn)到 logs 頁(yè)面</navigator> </span>
為組件綁定跳轉(zhuǎn)事件
index.wxml 中為 image 綁定事件
<span style="font-size:14px;"> <image src="{{item.imgsrc}}" bindtap="tz"></image> </span>
index.js 文件中添加跳轉(zhuǎn)方法:
<span style="font-size:14px;">tz: function(){ wx.navigateTo({ url: '../logs/logs', success: function(res){ // success }, fail: function() { // fail }, complete: function() { // complete } }) }</span>
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解
這篇文章主要介紹了微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05關(guān)于JavaScript?中?if包含逗號(hào)表達(dá)式
這篇文章主要介紹了?關(guān)于JavaScript?中?if包含逗號(hào)表達(dá)式,有時(shí)會(huì)看到JavaScript中if判斷里包含英文逗號(hào)?“,”,這個(gè)是其實(shí)是逗號(hào)表達(dá)式。在if條件里,只有最后一個(gè)表達(dá)式起判斷作用。下面來(lái)看看文章的具體介紹吧2021-11-11微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)
這篇文章主要介紹了微信小程序手勢(shì)操作之單觸摸點(diǎn)與多觸摸點(diǎn)的相關(guān)資料,需要的朋友可以參考下2017-03-03JavaScript 實(shí)現(xiàn)點(diǎn)擊關(guān)閉全屏示例詳解
這篇文章主要為大家介紹了JavaScript 實(shí)現(xiàn)點(diǎn)擊關(guān)閉全屏示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08JS 4個(gè)超級(jí)實(shí)用的小技巧 提升開(kāi)發(fā)效率
JS有很多小技巧可以使代碼更精簡(jiǎn)、更簡(jiǎn)單。今天主要分享4個(gè)技巧,在平時(shí)的工作中可以大大的縮短代碼量和開(kāi)發(fā)時(shí)間。,需要的朋友可以參考下面文章內(nèi)容喲2021-09-09