自定义微信小程序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})},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！