微信小程序自定义 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逻辑处理显示(后续完整解决方法会文章形式补充~~)
好用 , 方便点下收藏 , 不迷路 ! ! !