微信小程序自定义tabBar问题和自定义tabBar实现

微信小程序自定义 tabBar

基础库 2.5.0 开始支持，低版本需做兼容处理。
微信小程序基础库 2.5.0 开始微信官方开放自定义底部 tabBar 组件 。主要是为了让开发者可以更加灵活地设置 tabBar 样式，以满足更多个性化的场景。但是在实际开发者使用微信官方提供的组件 , 适配和兼容并不感人 , 让人从满怀希望到绝望 ;

先简单介绍一下微信官方提供的自定义tabBar 的用法

在 app.json 中的 tabBar 项指定 custom (布尔值)字段，在所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。在根目录下创建custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss具体页面代码不在书写 , 可在 tabBar 组件底部示例代码中点击 在开发者工具中预览效果 在编辑器中拷贝相关代码即可;

实际使用中出现问题?
在使用官方提供的自定义tabBar 组件中 , 点击切换tabBar时 , 点击切换选中的状态一直是上一次(上一个tabBar)点击的tabBar , 并且首次点击切换到其他tabBar页是会有闪烁现象 ; 在微信社区和博客中尝试很多方法 , 都没有能解决问题 , 最后不得放弃使用 , 自己从新自定义一个tabBar组件 ;

自助自定义tabBar组件实现

1.在app.js中 onLaunch 中 调用 wx.hideTabBar() 方法隐藏tab , 或者在第2步新建的 custom-tab-bar目录中index.js生命周期attached中调用 wx.hideTabBar() 方法隐藏tab; 注意基础库 1.9.0开始支持 , 全局变量globalData 中增加 selectedIndex:0 ;
2. 新建components目录 , 在components目录中创建 custom-tab-bar目录 custom-tab-bar目录中分别新建index.wxml , index.js ,index.json , index.wxss页面 ; 注意要在index.json 设置 component": true;
3. 在tabBar页面中引用组件 .json页中设置 "usingComponents": { "custom-tab-bar": "/components/custom-tab-bar/index" }
4. .wxml页面中使用 tabBar组件<custom-tab-bar></custom-tab-bar>

custom-tab-bar 代码页一起奉上

index.wxml页面

<cover-view class="tab-bar" style="background:{{items.style.background}}">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{items.data}}" wx:key="*this" class="tab-bar-item" data-path="{{item.linkUrl}}" data-index="{{index}}" bindtap="switchTab" wx:for-index="index">
    <cover-image src="{{selected === index ? item.select_imgUrl : item.default_imgUrl}}"></cover-image>
    <cover-view style="color: {{selected === index ? item.select_color : item.color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss页面

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

index.js页面

const App = getApp();
Component({
  lifetimes: {
    attached: function () {
      wx.hideTabBar();
      this.getTab();
    },
    ready: function () {
      this.setData({
        selected: App.globalData.selectedIndex
      });
    }
  },
  
  data: {
    selected: 0, // 当前 tabBar 索引 
    color: "#6e6d6b",
    selectedColor: "#fd4a5f",
    borderStyle: "black",
    backgroundColor: "#ffffff",
    items: [], //.wxml items 渲染数据
    //tabBar items（如下list字段）示例
    list: {
    	data：[{
			color: "#666666"
			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
			linkUrl: "pages/index/index"
			select_color: "#f44336"
			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
			text: "首页"
		},{
			color: "#666666"
			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843feecc5864.png"
			linkUrl: "pages/customtabbar/index?page_id=10125"
			select_color: "#f44336"
			select_imgUrl: "https://www.jinnong.com/uploads/202102021028438b66c5733.png"
		},{
			color: "#666666"
			default_imgUrl: "https://www.jinnong.com/uploads/20210202102843468f98837.png"
			linkUrl: "pages/flow/index"
			select_color: "#f44336"
			select_imgUrl: "https://www.jinnong.com/uploads/20210202102843559327043.png"
			text: "购物车"
		},{
			color: "#666666"
			default_imgUrl: "https://www.jinnong.com/uploads/202102021028438faa49673.png"
			linkUrl: "pages/user/index"
			select_color: "#f44336"
			select_imgUrl: "https://www.jinnong.com/uploads/2021020210284341feb1488.png"
			text: "我的"
		}],
		name: "导航组",
		type: "navBar",
		style: {
			background: "#ffffff"
			rowsNum: "4"
		}
    }
  },
  methods: {
  	/**
     * tabBar切换
     */
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path;
      App.navigationTo(url);
      App.globalData.selectedIndex = data.index;
    },
    /**
     * 后台接口获取tabBar数据
     */
    getTab(){
      let _this = this;
      App._get('page/nav', {}, function(res) {
        const items = res.data.items;
        _this.setData({items})
      });
    }
  }
})

index.json页面

{
  "component": true
}

注：实际项目中使用点击切换tabBar时会项存item下标指向问题，需要结合自己的项目数据结构做js逻辑处理显示（后续完整解决方法会文章形式补充~~）

好用 , 方便点下收藏 , 不迷路 ! ! !