微信小程序 頁(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ì)路徑,?問號(hào)后面加的是參數(shù),以 key-value 的方式,
這里傳了個(gè) value 為 2 的參數(shù)過去
//跳轉(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 開發(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ì)本站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注