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

2020-03-21 15:59:33

字體：大中小

供稿：網(wǎng)友

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

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

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

參數(shù)如下

微信小程序,跳轉(zhuǎn)

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

在my.wxml中加監(jiān)聽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ù)如下

微信小程序,跳轉(zhuǎn)

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

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

參數(shù)如下

微信小程序,跳轉(zhuǎn)

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

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

微信小程序,跳轉(zhuǎn)