微信小程序跳转页面的不同方法

  • Post author:
  • Post category:小程序


微信小程序如何进行页面切换呢?


一,使用声明式导航


1.对于tabbar页面的跳转

(若不明白tabbar可自行百度)

使用

switchTab

进行跳转

在wxml中输入


<navigator url=”/pages/message/message” open-type=”switchTab”>非tabbar页面的跳转</navigator>

其中/pages/message/message是跳转的地址,跳转方式是switchTab


2.对于非tabbar页面的跳转

使用navigator进行跳转

在wxml中输入


<navigator url=”/pages/info/info” open-type=”navigate”>tabbar页面的跳转</navigator>

其中/pages/info/info是跳转的地址,跳转方式是navigate


3.返回到上一个页面

在一个页面的wxml中输入


<navigator open-type=”navigateBack” delta=”1″>返回上一个页面</navigator>

注意:要想返回到之前页面,

open-type的类型必须是:

navigateBack

而delta后的数字表示的是要返回的层数


二,使用编程式导航


1.在wxml中添加一个button组件(即按钮)

<button bindtap=”tiaozhuan” >tiaozhuan2 </button>

//这是使用bindtap进行触摸,就是你点击这个按钮便会执行操作“tiaozhuan”


2.在js文件中添加名字为“tiaozuan”的函数,其中函数中使用wx.navigateTo指令

tiaozhuan() {

wx.navigateTo({

url: ‘/pages/lunbotu/lunbotu’

//url后面是跳转地址(备注不要复制进去)

})

}

正如上面使用声明式导航说的,跳转到非tabbar页面的时候用navigateTo,而跳转到tabbar页面的时候用switchTab,这里便不做赘述,懂得都懂。(若不明白tabbar可自行百度)


最后就是“后退”环节了


1.在wxml中添加一个button组件(即按钮)

<button bindtap=”goback”>后退</button>


2.接着在js文件中定义“goback”函数

goback() {

wx.navigateBack({

delta:1

//这里的delta表示后退的页面数量,如果只退一个的话可以不写delta

})

}

以上是我对微信小程序的学习,若各位有发现问题,请多多指教!阿里嘎多!



版权声明:本文为weixin_71247694原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。