当前位置:   article > 正文

微信小程序跳转页面的不同方法_微信小程序怎么在wxml中实现跳转的编写

微信小程序怎么在wxml中实现跳转的编写

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

一,使用声明式导航

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

    })

  }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/96921
推荐阅读
相关标签
  

闽ICP备14008679号