小程序 自定义tabBar

app.json 加入 tabBar 属性中添加 "custom": true,

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

tabBar 点击元素初始结构

	//index tab索引 pagePath 界面地址
	<view class="tab-icon"  bindtap="clickTabBarAction" data-index='{{index}}' data-url='{{item.pagePath}}'>
			<block >
				<image class="icon_img" src="{{selectIndex==index?item.selectedIconPath:item.iconPath}}"></image>
				<text class="{{selectIndex==index?'tab_text active':'tab_text'}}">{{item.text}}</text>
			</block>
		</view>

tabBar list

  selectIndex: 0,
 list: [ 
      {
      "pagePath": "/pages/home/home",
      "iconPath":"/images/dingdan.png",
      "selectedIconPath":"/images/dingdanActive.png",
      "text": "首页"
    },
    {
      "pagePath": "/pages/personalCenter/personalCenter",
      "selectedIconPath":"/images/gerenActive.png",
      "iconPath":"/images/geren.png",
      "text": "个人中心"
    }
    ]

index.js 切换代码

    clickTabBarAction(e) {
      let {index, url} = e.currentTarget.dataset;
      if (this.data.selectIndex == index) return
      wx.switchTab({url})
      this.setData({
        selectIndex: index
      })
    }

引入界面 onshow 回调中

 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selectIndex: index //index 页面索引
      })
    }