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

自定义微信小程序tabBar，兼容iPhone异形全面屏相关推荐

微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
微信小程序中的iPhone X适配解决
原因: 微信小程序在适配iphone x 的时候底部的横线会出现遮挡如图: 解决方案: 步骤一:在app.js文件中创建全局变量,然后获取设备型号 globalData: { isIp ...
mpvue自定义微信小程序indicator（指示点）样式
mpvue自定义微信小程序indicator(指示点)样式效果图 HTML <template><div class="container"><sw ...
微信小程序实现线上线下全渠道精准运营
从支付宝推出余额宝.花呗等功能大幅培养用户理财习惯,到微信支付通过微信红包打通"朋友圈",微信支付和支付宝的擂台之战从未平息,面对10亿交易笔数到20亿的跨越,较量已经从扫码支付延 ...
微信小程序的兼容处理汇总（不定期更新）
目录 1.名词统一 2.兼容问题的几种情况 3.问题分类 3.1.Api相关 3.1.1.wx.makePhoneCall()拨打电话页面样式不一致 3.1.2.wx.enableAlertBefor ...
【微信小程序】微信小程序tabBar使用中不显示问题
微信小程序中tabBar配置微信小程序中下方的tabBar如何配置很多刚刚接触小程序的同学,有些懵.这里给你一个详细的配置文档: 小程序配置 | 微信开放文档具体配置代码如下: "tab ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
小程序tabbar这套方案全搞定！
关于微信小程序的tarbar,相信你们都不会陌生在实现小程序微信原装的tabbar却比较呆板,不够精致,往往不符合自己的要求这个时候怎么办呢这套方案接着! 先简单的来说一下主要思想: 自定义字体 ...

自定义微信小程序tabBar，兼容iPhone异形全面屏

需求

解决

功能说明

使用文档

自定义微信小程序tabBar，兼容iPhone异形全面屏相关推荐

最新文章

热门文章