自定义微信小程序tabBar,兼容iPhone异形全面屏
目录
自定义微信小程序tabBar，兼容iPhone异形全面屏
需求
开发微信商城会员中心，tabBar有首页及用户中心，当用户没有登录时点击页面任意位置均弹出登录窗口。但是自带的微信tabBar无法被弹出的遮罩层覆盖，从而可以在两个tab之间切换。
解决
自己手动写一个类型tabBar组件
功能说明
1、高度还原原生微信小程序tabBar同等功能；
2、通过组件生命周期
attached
函数调用
wx.getSystemInfo()
成功回调参数中的model用于判断当前设备是否为iPhone，进而获取设备的宽高，计算宽高比，当宽高比大于1.78则判断设备为异形全面屏，从而增加tabBar组件的高度，解决iPhone设备底部的兼容问题。
使用文档
1、引入
需要使用的页面.json
"usingComponents": {
"tab-bar":"../../component/tab-bar/tab-bar"
},2、使用
需要使用的页面.wxml
<!-- 底部tab按钮 所有其他标签都应该放在该标签之上 -->
<tab-bar tabBarArr="{{tabBarArr}}" tabBarActive="{{tabBarActive}}" bind:click="nextPage"/>注意：
所有的其他标签都应当放置在tab-bar标签之上，如果放在tab-bar标签后面，极有可能不能正常在页面显示
3、数据及触发函数
需要使用的页面.js
data:{
tabBarArr:[
{
title:'首页',//显示的名称
src:'../../images/home.png',//未被选中的图片
activeSrc:'../../images/homeActive.png',//已选中状态图片
url:'../index/index',//跳转的链接
},
{
title:'我的',
src:'../../images/user.png',
activeSrc:'../../images/userActive.png',
url:'../userCenter/userCenter'
},
],
tabBarActive: 0, //当前被选中的tabBar
},
// tabBar跳转
nextPage: function (e) {
let url = e.detail.url;//跳转的路径
let id= e.detail.id;//当前点击的tabBarArr的索引值
wx.navigateTo({
url
})
},