微信小程序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.dataset
			const url = data.path
			wx.switchTab({
				url
			})
			this.selected = data.index
			this.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
      })
    }
  },