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

2024-04-16 02:13:48

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

一，使用声明式导航

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

})

}

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

微信小程序跳转页面的不同方法相关推荐

手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
微信小程序跳转页面带参数
微信小程序跳转页面带参数 1.给参数赋值 2.跳转页面 3.在目的地页面的onload里打印即可得到上个页面带过来的参数 4.完整的带参跳转方法(js)
微信小程序跳转页面携带参数
小程序跳转页面并携带参数,有两种情况,一是在wxml里通过navigator url跳转,一种是在js里通过点击事件跳转,下面案例为跳转详情页面在wxml中: <view class='wai ...
关于微信小程序跳转页面后不刷新问题，和页面跳转后左上角还保留了之前的页面，和存在返回按钮的解决方法
在微信小程序的页面跳转上,可能大多数的情况下会在一级子页面使用 wx.navigateTo跳转到二级页面,会从二级页面返回主页面或则从三级页面提交数据后返回主页面,为了良好的客户使用效果,在一二级页面 ...
微信小程序跳转页面方法
一.跳转到 tabBar 页面 wx.switchTab()方法用来跳转至tabBar页面,并关闭其他所有非 tabBar 页面,示例代码如下: wx.switchTab({url: '/index' ...
微信小程序跳转页面无效没有反应
在开发小程序的过程中,发现wx.navigateTo无效,也不报错,想了很久也不知道哪里出了问题,无奈去问度娘,终于看到以下几点(我的问题是第3点): 检查你要跳转的位置是否在app.js中注册过: ...
微信小程序跳转页面后onload中获取到的参数值和跳转页面时传的参数不一样
channel是一个从后端获取的被加密的一个字符串且已经被encode,我不对其进行修改,只在页面中跳转时带上这个参数,有接口需要传给后端这个参数时,传给他decodeURIComponent(cha ...
《微信小程序跳转页面安卓闪现两次》
背景为适应需求变化,跳转新的页面,增添逻辑后发现跳转页面闪现两次,核心代码如下: export const onViewGoods = (obj, opts, ckType) => {if ( ...

最新文章

热门文章