小程序自定義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