uni-app 开发微信小程序 自定义tabBar

pages.js 里面tabBar配置加上"custom": true

"tabBar": {
	"custom": true,
    "color": "#8a8a8a",
    "selectedColor": "#198cfb",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/basics.png",
        "selectedIconPath": "static/tabbar/basics_blue.png"
      },
      {
        "pagePath": "pages/UserCenter/index",
        "text": "我的",
        "iconPath": "static/tabbar/about.png",
        "selectedIconPath": "static/tabbar/about_blue.png"
      }
    ]
  }

然后在根目录下新增custom-tab-bar  因为uni-app 不会编译这个文件夹所以要建成微信小程序一样的

 主要的两个文件index.wxml，index.js

<view class="tab-bar-wrapper">
	<view class="tab-bar">
		<view class="tab-box">
			<view class="tab-bar-item" wx:for="{{list}}" wx:key="index" class="tab-bar-item"
				data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
				<image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" mode=""></image>
				<view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
			</view>
		</view>
	</view>
</view>

index.js

Component({
  data: {
    selected: 0,
    color: "#ffffff",
    selectedColor: "#f40918",
    list: [{
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabbar/basics.png",
      "selectedIconPath": "/static/tabbar/basics_blue.png"
    },{
      "pagePath": "/pages/UserCenter/index",
      "text": "我的",
      "iconPath": "/static/tabbar/about.png",
      "selectedIconPath": "/static/tabbar/about_blue.png"
    }]
  },
	attached () {
		this.setData({
		  selected: 0
		})
	},
	observers: {
		"selected": function (newVal) {
			const index = wx.getStorageSync("tabBarIndex")
			if (newVal != index) {
				this.setData({
				  selected: index
				})
			}
		}
	},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
			const index = wx.getStorageSync("tabBarIndex")
      this.setData({
        selected: index
      })
			wx.setStorageSync("tabBarIndex", data.index)
    }
  }
})

在pages/index/index里面的onLoad,onShow方法中 uni.setStorageSync("tabBarIndex", 0) 缓存对应的值

pages/UserCenter/index uni.setStorageSync("tabBarIndex", 1) 

在main.js 中 uni.setStorageSync("tabBarIndex", 0)  这个是在页面初始化的时候将缓存值改为0  不然会显示上一次的缓存值

效果图

样式我没有贴出来 样式就自己改成ui图一样的就好