小程序自定义tabbar 兼容 iphonex横条

官网提供的tabbar 熟悉目录结构

 

可能遇见问题：

1、按照官网给的示例，需要在引用的页面组件生命周期函数调用

     如果有其它组件可能会冲突报错。换种思路可以代替

     

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})

 

 

2、切换 tab卡页面会闪动未发现

3、视频iphonex 横条，小程序提供的方法

 

实现：

页面引入组件，根据组件id调用组件方法。

 

往下看。。。

 

 

app.json

  "tabBar": {
    "custom": true,  // 重点！！！
    "list": [
      {
        "pagePath": "pages/video-list/list",
        "text": "视频"
      },
      {
        "pagePath": "pages/live-list/live",
        "text": "直播"
      }
    ]
  },

 

 

组件：component/custom-tab-bar

目录结构

 

 

 

 

 

 

 

custom-tab-bar/index.js文件

 

const App = getApp();
Component({
  properties:{ // 这个不重要
    selected:{
      type: Number,
      value: 0
    }
  },
 
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#ffffff",
    list: [{
      "pagePath": "/pages/video-list/list", 
      text: "视频"
    }, {
      pagePath: "/pages/live-list/live", 
      text: "直播"
    }]
  },

  methods: {
    changeCls(e){ 
      this.setData({
        selected: e
     }) 
    },
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path  
      wx.switchTab({url})  // 这个是需要的，重要
      //下边可以注释掉，目的是做标记，直接调用 changeCls方法 代替！！！

// this.setData({ // selected: data.index // }) 

// wx.setStorageSync('selected', data.index)  } } })

 

 

custom-tab-bar/index.wxml文件

<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
   
<!--图片不重要，为了测试是否闪动，未发现-->
<image style="width:40px;height:40px" src="https://jiaoday1.oss-cn-beijing.aliyuncs.com/portrait/2021/07/14/236879682cc44a6b9f6fb0ab441bbf54.png"></image>

<!--图片不重要，-->

  <view class="" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

 

custom-tab-bar/index.wxml文件

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px; 
  background: rgba(1,1,1,.6);
  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 .txt {
  font-size: 36rpx;
}

 

接下来就是pages 页面相关的

json 文件

{
  "usingComponents": {
    "mp-video-swiper": "../../component/video-swiper/index",
    "toast-tip": "../../component//toast/toast",
    "app-download": "../../component/app-download/app-download",
    "tab-bar":"../../component/custom-tab-bar/index"     这个是重点！！！
  },
  "navigationStyle": "custom" 
}

 

pages/list.wxml

使用组件定义：id , 默认 selected = "0"

 <tab-bar id="tab_id" selected = "0"></tab-bar>

 

pages/list.js

onLoad(){

   this.tabSwitch = this.selectComponent('#tab_id'); // 初始化

}

 

  onShow() {

    // 配合tab切换使用

    this.tabSwitch.changeCls(1)  // 使用，指定选择那一个tab.

  },

 

适配可以使用API方法

App({
  onLaunch: function () {
    let self = this;
    // 获取系统信息  
    wx.getSystemInfo({ // 重点！！！
      success: (res) => {
        console.log('getSystemInfo')
        console.log(res)
        if(res.safeArea.top > 20){
          self.globalData.isPhoneX = true
        }

        
      }
    })
  },
  globalData:{ 
    isPhoneX: false  //申明全局变量
  }
})

 

页面处理，根据实际情况

 <view class="user-box" style="padding-bottom: {{isPhoneX?'44':'0'}}px">

iphonex 

 

 

 

iphone6