首頁 > 微信小程式 > 小程式開發 > 小程式如何實現頁面跳轉

小程式如何實現頁面跳轉

coldplay.xixi
發布: 2020-08-31 10:51:46
原創
13070 人瀏覽過

小程式實現頁面跳轉的方法:1、使用導航元件,標籤,頁面連結來實現;2、給頁面佈局加監聽bindtap事件,並在方法裡面,透過【wx.navigatorTo】來實現跳轉;3、透過【wx.redirectTo】實現跳轉。

小程式如何實現頁面跳轉

【相關學習推薦:#小程式開發

#小程式實現頁面跳躍的方法:

1.使用導航元件,標籤,頁面連結來實現(可以發現點擊時有背景)

<!-- sample.wxml -->
<view class="btn-area">
 <navigator url="../my/my">跳转到新页面</navigator>
</view>
登入後複製

參數如下

小程式如何實現頁面跳轉

2.給頁面佈局加監聽bindtap事件,然後在方法裡面,透過wx.navigatorTo來實現跳轉(保留目前頁面,跳到應用程式內的某個頁面,使用wx.navigateBack可以回到原始頁面)

在my.wxml中加監聽bindtap事件

<view bindtap=&#39;jump&#39;>跳转</view>
登入後複製

在my.js中實現跳轉

#
jump:function(){
  wx.navigateTo({
   url: &#39;../login/login&#39;,
   success: function(res) {
 
   },
   fail: function(res) {
 
   },
   complete: function(res) {
 
   },
  })
 }
登入後複製

參數如下

小程式如何實現頁面跳轉

3.透過wx.redirectTo實現跳轉(關閉目前頁面,跳到應用程式內某個頁面)

navigateto_index: function (event) { 
 wx.redirectTo({ 
 url: &#39;../index/index&#39;, 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 }) 
 
 }
登入後複製

參數如下

小程式如何實現頁面跳轉

4.透過wx.navigateBack返回上一層(關閉目前頁面。返回上一頁面或多層級頁面)。

wx.navigateBack({ 
 delta: 1, // 回退前 delta(默认为1) 页面 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 })
登入後複製

小程式如何實現頁面跳轉

相關學習推薦:微信公眾號開發教學

以上是小程式如何實現頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板