首頁 >微信小程式 >小程式開發 >微信小程式如何實現跳轉? (方式介紹)

微信小程式如何實現跳轉? (方式介紹)

青灯夜游
青灯夜游轉載
2020-04-15 09:30:324680瀏覽

微信小程式如何實現跳轉?以下這篇文章為大家總結微信小程式實現跳轉的幾種方式。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

微信小程式如何實現跳轉? (方式介紹)

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中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除