1. 程式人生 > >小程式js事件跳轉

小程式js事件跳轉

1:wx.navigateTo ;保留當前頁面(有返回按鈕)

效果:

demo示例:
wxml:

<view bindtap="bindViewTap" class="up">
   我要繫結事件來跳轉了
</view>

js:

Page({
  data: {

  },

  //事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../site/site'
    })
  },

  onLoad: function() {
  },

})

wxss:

.up {
  height: 80rpx;
  line-height: 80rpx;
  background:#44b0fc;
  color: #fff;
  text-align: center;
}

2:wx.redirectTo;關閉當前頁面(無返回按鈕)

wxml和樣式同上
js:

Page({
  data: {
  },

  //事件處理函式
  bindViewTap: function() {
    
    //2:關閉當前頁面(無返回按鈕)
    wx.redirectTo({
      url: '../site/site'
    })
  },

  onLoad: function() {},

})

3:wx.switchTab;跳轉到tabBar頁面(底部導航)

遇到第一種wx.navigateTo 不跳轉問題的時候(大多數是因為想要跳的介面是對應底部的導航,所以沒有反應;這個時候,就需要用到這種方法了)
js:

Page({
  data: {},
  //事件處理函式
  bindViewTap: function() {

    //3:跳轉到tabBar頁面(底部導航)
    //這種方法通常  是遇到wx.navigateTo 不跳轉問題的時候(大多數是跳的底部的導航,所以沒有反應)
    wx.switchTab({
      url: '../me/me'
    })
  },

  onLoad: function() {},

})

原文作者:祈澈姑娘;技術部落格:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛程式設計,愛運營,愛折騰。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探討交流。

  • 關注「程式設計微刊」公眾號 ,在微信後臺回覆「領取資源」,獲取IT資源200G乾貨大全。