小程序开发记录（四）

小程序开发记录（四）

iphoneX自定义顶部tab栏适配

出现问题：除iphoneX其他适配都正常，但是实测时iPhone X出现适配错误。

自定义顶部栏实现
tip：需要在pages同级目录下创建目录 custom-tab-bar
该目录下有三个文件，html，js，json
index.html

<view class='nav-wrap' style="height:{{height}}px;bottom:{{bottom}}px;top:{{top}}px;line-height:{{height}}px;color:{{navbarData.color}}">
<view class="nav-back-wrap" >
 <image wx:if="{{navbarData.showCapsule}}" class="nav-backhome" bindtap='backhome' src="../image/backimg.png" mode="widthFix" />
</view>
  <view class='nav-title'>{{navbarData.title}}</view>
</view>

index.js
tip：在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { },
      
    }
  },
  data: {
    height: '',
    bottom: '',
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1,
      title: "声龄预测"
    }
  },
  methods: {
    //返回到首页
    backhome: function () {
      wx.navigateBack({
        delta: 1,
      })
    }
  }
}) 

index.json
需要在 json 文件中进行自定义组件声明

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

此处场景为顶部tab需要与胶囊对齐，所以正常人都觉得应该获取胶囊的高度。：）
然而我组长的iPhoneX获取不到胶囊位置，整个tab飘了！！！
所以，我就判断了一下机型，调用wx.getSystemInfoSync()；
不过反正机器的屏幕大小不变，如果时iPhoneX，就写死高度：）

App({
  onLaunch: function () {
    var that=this;
    loginApi.wxLogin(that).then((data)=>{
      console.log(data)
      if (data.statusCode == 200){
        var capsule = wx.getMenuButtonBoundingClientRect();
        this.globalData.capsuleheight = capsule.bottom - capsule.top;
        this.globalData.capsuletop = capsule.top;
        this.globalData.capsulebottom = capsule.bottom;
      }
    })
  },
  onShow:function(){
    var res = wx.getSystemInfoSync();
    console.log(res.model)
    if(res.model=='iPhone X'){
      console.log('iPhone X')
      this.globalData.capsulebottom =82;
    }
  },
  globalData: {
    capsuleheight: 0,
    capsuletop: 0,
    capsulebottom: 0
  }
})