之前微信小程序使用模板形式自定义的tabBar, 转到百度小程序发现不是很好用,data值传不进去,所以就做了修改,改成了component组件式了,下面是我的代码,有需要的朋友可以参考,根据自己需求调整
我的tabBar为 首页,客服,电话,预约和查询,整个文件夹目录放在了pages文件夹下面
1. tabBarComponent.json
{
"component": true
}
2. tabBarComponent.js
Component({
properties: {
propName: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: 'tabBarComponent', // 属性初始值(必填)
observer: function(newVal, oldVal) {
// 属性被改变时执行的函数(可选)
}
}
},
data: {
age: 1,
tabBar: [
{
"current": 1,
"pagePath": "/pages/index/index",
"text": "首页",
"iconPath": "/images/index.png",
"selectedIconPath": "/images/index1.png"
},
{
"current": 0,
"pagePath": "/pages/customService/customService",
"text": "客服",
"iconPath": "/images/custom.png",
"selectedIconPath": "/images/custom1.png"
},
{
"current": 0,
"pagePath": "/pages/teleService/teleService",
"text": "电话",
"iconPath": "/images/tele.png",
"selectedIconPath": "/images/tele1.png"
},
{
"current": 0,
"pagePath": "/pages/orderService/orderService",
"text": "预约",
"iconPath": "/images/order.png",
"selectedIconPath": "/images/order1.png"
},
{
"current": 0,
"pagePath": "/pages/repairProgress/repairProgress",
"text": "查询",
"iconPath": "/images/search.png",
"selectedIconPath": "/images/search1.png"
}
]
}, // 私有数据,可用于模版渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {},
detached: function () {},
methods: {
onTap: function (event) {
// let that = this;
// let index = event.currentTarget.dataset.index;
// that.data.tabBar[index].current = 0;
// this.setData({
// tabBar:that.data.tabBar
// });
},
callPhone: function () {
let callPhone = getApp().globalData.callPhone;
callPhone();
},
}
});
3. tabBarComponent.swan
<view class="container">
<view class="tabBar">
<block s-for="{{tabBar}}" s-for-item="item" s-key="tabBar">
<view s-if="{{item.text == '首页'}}" class="tabBar-item">
<view>
<view><image class="icon" src='{{item.current== 1 ? item.selectedIconPath : item.iconPath}}'></image></view>
<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
</view>
</view>
<view s-if="{{item.text == '电话'}}" class="tabBar-item">
<view bindtap="callPhone">
<view><image class="icon" src='{{item.current== 1 ? item.selectedIconPath : item.iconPath}}'></image></view>
<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
</view>
</view>
<view s-if="{{item.text != '电话' && item.text != '首页'}}" class="tabBar-item" data-index="{{index}}">
<navigator url="{{item.pagePath}}" hover-class="navigator-hover">
<view><image class="icon" src='{{item.current== 1 ? item.selectedIconPath : item.iconPath}}'></image></view>
<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
</navigator>
</view>
</block>
</view>
</view>
4. tabBarComponent.css
/* miniprogram/pages/tabBar/tabBar.wxss */
page{
padding-bottom: 100rpx;
position: relative;
}
.icon{
width:50rpx;
height: 50rpx;
}
.tabBar{
width:100%;
position: fixed;
bottom:0;
padding:10rpx;
margin-left:-4rpx;
background:#F7F7FA;
font-size:24rpx;
color:#8A8A8A;
box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}
.tabBar-item{
float:left;
width:20%;
text-align: center;
overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
color:#bf9571;
}
.tabBar button {
display: initial;
border: none;
line-height: unset;
height: unset;
width: unset;
padding :0;
margin: 0;
background: none;
box-shadow: none;
font-size: unset;
color: unset;
outline: none;
}
.mobile-service {
width: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.mobile-service .content {
width: 100%;
height: 400rpx;
box-shadow: 0 10rpx 12rpx 0
rgba(0, 0, 0, 0.2);
border-radius: 40rpx 40rpx 0 0;
background: rgba(0,0,0,0.8);
position: absolute;
bottom: 0;
}
.mobile-service .content text {
font-size: 30rpx;
line-height: 48rpx;
letter-spacing: 2rpx;
color: #ffffff;
}
.mobile-service .content .title {
display: block;
font-size: 48rpx;
text-align: center;
margin-top: 60rpx;
}
.mobile-service .content .des {
width: 586rpx;
margin: 40rpx auto 0;
}
.mobile-service .content .des .phonenumber {
font-size: 30rpx;
color: #bf9571;
}
.mobile-service .content .bottom-button {
margin-top: 50rpx;
text-align: center;
display: flex;
justify-content: center;
}
.mobile-service .content .bottom-button button{
width: 200rpx;
height: 50rpx;
font-size: 26rpx;
color: #FFF;
line-height: 50rpx;
background: none;
box-shadow: 0 4rpx 4rpx 0
rgba(0, 0, 0, 0.2);
border-radius: 10rpx;
border: solid 1px #bf9571;
margin: 0 10rpx;
}
.mobile-service .content .bottom-button .ok-button {
background: #bf9571;
border: none;
}
在页面使用组件的方法,例如在index页面使用
1. 首先在index.json中加入
{
"usingComponents": {
"custom-component": "/pages/tabBarComponent/tabBarComponent"
}
}
2. 在index.swan页面
<custom-component name="tabBarComponent"></custom-component>
OK 大功告成了!!! 这是我的源码,需要的可以参考根据自己需求修改,不足的地方也希望各位提出好的改进意见