【百度小程序】tabBar自定义组件使用

之前微信小程序使用模板形式自定义的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  大功告成了！！！ 这是我的源码，需要的可以参考根据自己需求修改，不足的地方也希望各位提出好的改进意见