小程序 页面跳转方法总结以及优缺点

一、 .wxml跳转

<navigator url="/pages/rebortcontrol/index" class='item'>
//可以添加open-type="",属性,设置不同跳转方式,常用属性有redirect,switchTab....。

二、.js中跳转

//wxml添加bindtap点击监听方法 clickTap
<button class='bt' hidden='{{visible}}' bindtap='clickTap'>立即体验</button>

在.js中实现clickTap:function(){}

  • navigateTo
  //navigateTo跳转,只是打开新界面。
  
  clickTap: function (){
       console.log("sss")
             wx.navigateTo({
                    url: '../index/index'
              })
  },

注意:该方法不能跳转到tabBar中的导航页界面。

  • redirectTo 与reLaunch
// 这俩个方法跳转到指定界面,都会造成界面闪烁的问题,体验不是太好,所以放在一起说;
//另外redirectTo是指关闭当前页跳转新界面,而reLaunch是跳转新界面,关闭之前所有的界面,
//所以一般用在跳转到首界面。

 clickTap: function (){
       console.log("sss")
             wx.reLaunch({
                    url: '../index/index'
              })
  },
  • switchTab
 // 跳转到tabBar页面,并关闭其他所有tabBar页面,并且不会闪烁
 clickTap: function (){
       console.log("sss")
             wx.switchTab({
                    url: '../index/index'
              })
  },
  • navigateBack
 clickTap: function (){
       console.log("sss")
             wx.navigateBack({
                  //  返回到已经打开过并且没被销毁的某个界面,经常用来上一级
              })
  },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值