网站建设术语 英文,威海网站建设排名榜,数字城市建设网站,静态网页效果图uniapp内置多种跳转方式#xff0c;我这里介绍两个最常用的跳转#xff0c;uni.navigateTo和uni.switchTab#xff0c;前者为跳转到非TabBar页面#xff0c;后者为跳转到TabBar页面#xff0c;所谓TabBar就是底部导航栏配置的页面#xff0c;例如下方的index.vue。
在pa…uniapp内置多种跳转方式我这里介绍两个最常用的跳转uni.navigateTo和uni.switchTab前者为跳转到非TabBar页面后者为跳转到TabBar页面所谓TabBar就是底部导航栏配置的页面例如下方的index.vue。
在pages.json中 tabBar: {list: [{pagePath: pages/index/index,text: 首页,iconPath: static/buliangzhu.png,selectedIconPath: static/zhuyeliang.png},{pagePath: pages/user/user,text: 个人中心,iconPath: static/user2.png,selectedIconPath: static/user1.png}]},
配置成导航栏的页面无法通过navigateTo方法跳转只能通过switchTab方法。
一、navigateTo
例如我们需要在index.vue页面里面跳转到test1.vuetest1是非tabBar页面就给需要绑定事件的按钮添加点击事件。再在methods里面编写方法调用uni.navigateTo
!-- index.vue --
templateview classhome button clicktoTest1/button/view/templatescriptexport default {data() {return {}},methods: {toTest1() {uni.navigateTo({url:/pages/test1/test1})}}}
/script二、switchTab
这里我们在test1页面中想点击按钮跳转到index页面 templateview classhome button clicktoIndex/button/view/templatescriptexport default {data() {return {}},methods: {toIndex() {uni.switchTab({url:/pages/index/index})}}}
/script如果要从成功后跳转到tabBar页面只能用switchTab
success: (res) {console.log(res.data.status, 状态);if (res.data.status 1) {this.msgType successthis.messageText 更新成功this.$refs.message.open()uni.switchTab({url: /pages/index/index})} else {this.msgType errorthis.messageText 更新失败this.$refs.message.open()}
