快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)的幾種方式總結(jié)（推薦）

更新時(shí)間：2019年04月24日 11:53:07 作者：lily2016n

這篇文章主要介紹了微信小程序跳轉(zhuǎn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今天把實(shí)現(xiàn)微信頁(yè)面的跳轉(zhuǎn)的幾種方法總結(jié)分享下

1.使用導(dǎo)航組件，標(biāo)簽，頁(yè)面鏈接來(lái)實(shí)現(xiàn)（可以發(fā)現(xiàn)點(diǎn)擊時(shí)有背景）

<!-- sample.wxml -->
<view class="btn-area">
 <navigator url="../my/my">跳轉(zhuǎn)到新頁(yè)面</navigator>
</view>

參數(shù)如下

2.給頁(yè)面布局加監(jiān)聽(tīng)bindtap事件，然后在方法里面，通過(guò)wx.navigatorTo來(lái)實(shí)現(xiàn)跳轉(zhuǎn)（保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用wx.navigateBack可以返回到原頁(yè)面）

在my.wxml中加監(jiān)聽(tīng)bindtap事件

<view bindtap='jump'>跳轉(zhuǎn)</view>

在my.js中實(shí)現(xiàn)跳轉(zhuǎn)

jump:function(){
  wx.navigateTo({
   url: '../login/login',
   success: function(res) {

   },
   fail: function(res) {

   },
   complete: function(res) {

   },
  })
 }

參數(shù)如下

3.通過(guò)wx.redirectTo實(shí)現(xiàn)跳轉(zhuǎn)（關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)某個(gè)頁(yè)面）

navigateto_index: function (event) { 
 wx.redirectTo({ 
 url: '../index/index', 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 }) 

 }

參數(shù)如下

4.通過(guò)wx.navigateBack返回上一級(jí)（關(guān)閉當(dāng)前頁(yè)面。返回上一頁(yè)面或多級(jí)頁(yè)面）。

wx.navigateBack({ 
 delta: 1, // 回退前 delta(默認(rèn)為1) 頁(yè)面 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 })