微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏

本文主要是介绍微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. 首先在pages.json中配置tabbar信息

2. 在代码根目录下添加 tabBar 代码文件

直接把微信小程序文档里面的四个文件复制到自己项目中就可以了

 

3. 根据自己的需求更改index.js文件

首先我这里需要判断什么时候隐藏某一个元素，需要引入接口

然后在切换tabbar时，改变tabbar当前点击的元素

import getList from '../api/kdh'
Component({data:{}............created(){}methods:{switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})this.selected = data.indexthis.setData({selected: this.selected})}}
})

4. tabbar图标切换 要点击两次才能有选中状态 

在每一个tabbar页面中，设置当前的tabbar的值

//vue3写法
onShow(()=>{const curPages = getCurrentPages()[0];  // 获取当前页面实例console.log("curPages",curPages)if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {  curPages.getTabBar().setData({  selected: 0   // selected根据tabbar数组里面的索引值来写的});  }
})//vue2写法
onShow() {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({//唯一标识（其它设置不同的整数）  selected: 0})}},

这篇关于微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---