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图一样的就好