小程序自定义tabar实现
1. app.json文件的处理
1. 添加:"custom": true,使用自定义的tabbar
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [
{
"pagePath": "pages/information/information",
"text": "资讯",
"iconPath": "image/icon_zixun1.png",
"selectedIconPath": "image/icon_zixun.png"
},
{
"pagePath": "pages/contacts/contacts",
"text": "通讯录",
"iconPath": "image/icon_tongxunlu.png",
"selectedIconPath": "image/icon_tongxunlu2.png"
},
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/icon_shouye2.png",
"selectedIconPath": "image/icon_shouye.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "image/icon_xiaoxi.png",
"selectedIconPath": "image/icon_xiaoxi2.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "image/icon_wode.png",
"selectedIconPath": "image/icon_wode2.png"
}
]
},
2. 创建组件目录
-tabbarCmponent
-tabbar.js
-tabbar.json
-tabbar.wxml
-tabbar.wxss
3. js文件解读:
// tabbarCmponent/tabbar.js
var app = getApp()
Component({
/**
* 组件的属性列表
*/
properties: {
selected: {
type: Number,
value: 0
}
},
/**
* 组件的初始数据
*/
data: {
"color": "#aacfcf",
"selectedColor": "#00bcd4",
"backgroundColor": "#000000",
"size": "20rpx",
"selectedSize": "25rpx",
"list": [
{
"pagePath": "/pages/information/information",
"text": "资讯",
"iconPath": "/image/icon_zixun1.png",
"selectedIconPath": "/image/icon_zixun.png"
},
{
"pagePath": "/pages/contacts/contacts",
"text": "通讯录",
"iconPath": "/image/icon_tongxunlu.png",
"selectedIconPath": "/image/icon_tongxunlu2.png"
},
{
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/image/icon_shouye2.png",
"selectedIconPath": "/image/icon_shouye.png"
},
{
"pagePath": "/pages/message/message",
"text": "消息",
"iconPath": "/image/icon_xiaoxi.png",
"selectedIconPath": "/image/icon_xiaoxi2.png"
},
{
"pagePath": "/pages/my/my",
"text": "我的",
"iconPath": "/image/icon_wode.png",
"selectedIconPath": "/image/icon_wode2.png"
}
]
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
var data = e.currentTarget.dataset
var url = data.path;
console.log(url)
if (url) {
wx.switchTab({ url });
} else {
if (app.globalData.userinfo) {
wx.navigateTo({
url: "/pages/publish/publish",
})
} else {
wx.navigateTo({
url: '/pages/login/login',
})
}
}
}
}
})
4. js文件解读:
# component:true ---即表示使用自定义tabbar
{
"component": true,
"usingComponents": {}
}
5.wxml 文件示例
# wx:for 循环list列表,生成自定义的tabbar标签
# 三元运算表达式:判断tabbar标签是否选中
- src="{{selected === index ? item.selectedIconPath : item.iconPath}}"
<!--tabbarCmponent/tabbar.wxml-->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" bindtap="switchTab">
<block wx:if="{{ index === 2}}" id="pub">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" id="pub"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}};font-size: {{selected === index ? selectedSize : size}};margin-top:50rpx">{{item.text}}</cover-view>
</block>
<block wx:else>
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}};font-size: {{selected === index ? selectedSize : size}}">{{item.text}}</cover-view>
</block>
</cover-view>
</cover-view>
6. wxss 文件示例
/* tabbarCmponent/tabbar.wxss */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
z-index:998
}
.tab-bar-border {
background-color: rgba(211, 206, 206, 0.73);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1rpx;
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: 40rpx;
height: 40rpx;
margin-bottom: 15rpx;
}
.tab-bar-item cover-view {
font-size: 20rpx;
}
#pub{
position: fixed;
bottom: 35rpx;
width: 128rpx;
height: 128rpx;
}
7. 应用实例:index页面(tabbar)
# 两步骤即可
- selected:即为tabbar.js 文件中的properties属性列表,
- selected: 标记tabbar的index,
1. index.json: "tabbar": "/tabbarCmponent/tabbar"
- {
"usingComponents": {
"tabbar": "/component/tabBar/tabBar"
},
"enablePullDownRefresh": true
}
2. index.wxml:
- <tabbar selected="{{2}}"></tabbar>
- ......
注:每个tab页面都要引用组件