小程序开发第三天：自定义底部TabBar栏

1. 在components下新建一个文件夹tabbarConponent，在里面创建四个文件分别是tabbar.js、tabbar.json、tabbar.wxml和tabbar.wxss。
2. wxml中：对底部导航栏进行基本布局

<view wx:if="{{showOrHide}}" class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <view wx:if="{{item.isSpecial}}" bindtap="navTo" data-url="{{item.pagePath}}" class="tabbar_nav" hover-class="none" style="color:{{tabbar.selectedColor}}">
      <view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
      <image class='special-text-wrapper'></image>
      <text>{{item.text}}</text>
    </view>
    <view wx:else class="tabbar_nav" bindtap="navTo" data-url="{{item.pagePath}}"  style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" >
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </view>
  </block>
</view>

3. json中：设置为组件

{
  "component": true,
  "usingComponents": {}
}

4. wxss中：设置底部导航栏的基本样式以及兼容iphoneX及更高版本的样式

.tabbar_box{
    font-size: 22rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 98rpx;
    box-shadow: 0 0 16px 2px rgba(199,199,199,0.40);
}
.tabbar_box.iphoneX-height{
    padding-bottom: 68rpx;
}
.middle-wrapper{
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
  bottom: 68rpx;
}
.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}
.tabbar_icon,.special-text-wrapper{
    width: 40rpx;
    height: 40rpx;
    margin-bottom:10rpx
}
.special-wrapper{
  position: absolute;
  left: 77rpx;
  top: -45rpx;
  width: 106rpx;
  height: 106rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 8rpx;
}
.special-wrapper .tabbar_icon{
    width: 90rpx;
    height: 90rpx;

}

5. js中：底部导航

// tabBarComponent/tabBar.js
import wepy from 'wepy';

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        tabbar: {
            type: Object,
            value: {
                'backgroundColor': '#ffffff',
                'color': '#979795',
                'selectedColor': '#1c1c1b',
                'list': [
                    {
                        'pagePath': 'pages/index/index',
                        'iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/[e-mail]',
                        'selectedIconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/[e-mail]',
                        'text': '首页'
                    },
                    {
                        'pagePath': 'pages/assemble/assemble',
                        'iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/[e-mail]',
                        'isSpecial': true,
                        'text': '发布拼团'
                    },
                    {
                        'pagePath': 'pages/user/user',
                        'iconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/[e-mail]',
                        'selectedIconPath': 'https://rplatform.oss-cn-beijing.aliyuncs.com/smallprogram/basic/[e-mail]',
                        'text': '我的'
                    }
                ]
            }
        },
        showOrHide: {
            type: Boolean,
            value: true
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        isIphoneX: wepy.$instance.globalData.systemInfo.model.toLowerCase().includes('iPhone X'.toLowerCase())
    },

    /**
     * 组件的方法列表
     */
    methods: {
        navTo(e) {
            wepy.switchTab({
                url: e.currentTarget.dataset.url,
                success(e) {
                    console.log(e);
                },
                fail(e) {
                    console.log(e, 'err');
                }
            });
        }
    },
    onLoad(){

    }
});

6. 在app.wepy中获取移动端设备信息：

getSystemInfo() {
   let self = this;
   wepy.getSystemInfo({
       success: function (res) {
           self.globalData.systemInfo = res;
           console.log(res,res.model.toLowerCase().includes('iPhone X'.toLowerCase()));
           self.globalData.isIphoneX = res.model.toLowerCase().includes('iPhone X'.toLowerCase())
       }
   });
}

7. 然后在需要底部导航栏的页面中引入即可。

本文地址：https://blog.csdn.net/qq_25134721/article/details/85987495