小程序底部自适应IPhoneX safe-area 使用weUI套件基础样式改造

最新推荐文章于 2025-05-08 20:27:56 发布
最新推荐文章于 2025-05-08 20:27:56 发布
阅读量736 收藏
点赞数 1
分类专栏： 小程序 文章标签： 小程序 html5 css3 css web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42335962/article/details/105937059
版权
本文介绍了如何在引入WeUI套件的基础上，解决小程序在iPhoneX上底部安全区域的适配问题。通过使用WeUI的toptip样式，并对顶部和底部进行特定的样式修改，实现了底部的自适应。关键在于底部的变量判断及动画处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

小程序底部自适应IPhoneX safe-area 使用weUI套件基础样式改造

说明

我是在引入weUI的情况下成功的，所以如果你没有引入也可以的话麻烦评论告诉我，关键代码：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

实现效果
效果图

引入WeUI

npm或者本地，我用的是本地，百度即可

顶部

顶部我使用的是toptip样式，注意是底层样式

最低0.47元/天 解锁文章
微信小程序ios底部黑条自适应
coca_cola_1105的博客
06-01 995
微信小程序ios底部黑条自适应微信小程序ios底部黑条自适应解决方案 微信小程序ios底部黑条自适应 在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况。 解决方案 在微信小程序上适配安全区域 在app.js onLaunch() { this.init() } init(){ wx.getSystemInfo({
微信小程序初学记录---npm安装weui组件
helal的博客
12-16 3057
一、安装微信开发工具 二、新建项目 1、菜单》项目》新建项目 二、引入weui组件 1、我用的是npm安装 2、在项目根目录执行命令npm init，安装npm包，然后一直确定 3、然后再执行命令npm install --production 4、微信开发工具》工具》构建npm，若有提示 “没有找到可以构建的NPM包”，检查下npm 模块有没有打钩上 如果有打钩，...
微信小程序、H5 （IOS 底部适配）safe-area-inset-bottom
吴冬雪的博客
03-07 5082
需要将viewport设置为cover，env和constant才能生效。因为现在的ios全面屏底部有小黑线，位于底部的元素会造成黑线的阻挡，可以使用。auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。tips: 记得先使用constant 再使用 env。在lang="stylus"中 前面需要加~contain：可视窗口完全包含网页内容。cover：网页内容完全覆盖可视窗口。
ios底部存在安全距离可通过设置 safe-area-inset-bottom
最新发布
weixin_46495993的博客
05-08 321
padding-bottom: calc(底部距离rpx + constant(safe-area-inset-bottom));padding-bottom: calc(底部距离rpx + env(safe-area-inset-bottom));safe-area-inset-bottom ：安全距离底部边界的距离。safe-area-inset-left：安全区域距离左边边界的距离。safe-area-inset-top：安全区域距离顶部边界的距离。uniapp在安卓和iso的底部安全距离。
小程序IOS安全区域优化：safe-area-inset-bottom
sinat_33255495的博客
04-12 1万+
IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式： .model{ padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } 获取高度时，可用： .model{ height: calc(100% - constant(safe-area-inse
env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题
郊眠寺
01-04 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
httpchc320321-weUI-master_weui_小程序UI_
10-02
在实际使用中，开发者需要在小程序的页面配置文件（如`index.json`）中引入WeUI的样式文件，并在页面的JS文件中引用其JavaScript库，然后就可以直接使用WeUI提供的组件类名来创建和定制界面。例如，要创建一个按钮，...
微信小程序--------WeUI框架
weixin_44775723的博客
09-03 736
微信小程序官方推出的小程序UI库WeUI。 一、简介 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。 WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样...
（微信小程序之坑-2）微信小程序--weui组件--Searchbar说明文档真难懂了
陈二狗的博客
08-29 775
微信小程序--weui组件学习--Searchbar
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
10-18
在本文中，我们将深入探讨如何使用微信小程序搭建一个基于mpvue、mpvue-weui和fly.js的应用。首先，让我们了解一下这三个关键组件： 1. **微信小程序框架：mpvue** mpvue 是一个基于 Vue.js 的开放源代码框架，专...
safe-area-inset-bottom
weixin_46337813的博客
09-17 1095
顺序不要乱 padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
小程序进阶-env(safe-area-inset-bottom)的使用
weixin_43166227的博客
09-04 6269
env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量，用于获取设备底部和顶部安全区域的大小。所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。
safe-area-inset-bottom iphone
热门推荐
飞翔的熊blabla
07-10 4万+
屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级中，屏幕尺寸和分辨率都遗传了iPho...
小程序设置底部安全距离
qq_48795670的博客
08-25 5294
都是用于设置底部安全距离的CSS属性值，但它们的使用方式和适用环境略有不同。具体使用哪个取决于您所使用的环境或框架的要求。函数是CSS的通用函数，可以在任何支持的环境中使用。因此，在不同的环境或框架中，这两个函数的使用方式可能会有所不同。是CSS的一个属性值，用于设置底部安全距离。它表示一个固定的值，可以直接使用具体的像素值来设置。都是CSS中的属性值，用于在小程序中设置底部安全距离。函数是WebKit的CSS函数，用于在小程序中设置底部安全距离。元素的底部padding设置为底部安全距离的值。
小程序开发中的底部安全区域处理技巧
weixin_53156345的博客
11-17 2015
底部安全区域是指在一些全面屏手机上，由于硬件结构的限制，屏幕显示区域并非完全覆盖整个屏幕，因此底部会存在一个类似"刘海"的凹口。这一区域被称作底部安全区域，开发者需要特别处理才能确保页面内容不被遮挡。
安全区域js
m0_73035846的博客
07-29 535
1. 通常 我们在写底部 tabar 栏的时候 ，就会经常遇到这个样的问题 ，因为在苹果手机下面 会有一个黑色的 线条 ，但是 为了解决这个问题 我们需要在底部加个方法。
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
yzyblog的博客
03-31 5818
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 本文目录 前言 · 内容与小黑线重叠情况说明 1.安全区域含义 2.微信小程序适配iPhoneX底部小黑条(Home Indicator) （1）适配方案一：使用已知底部小黑条高度34p...
css 安全区域 safe-area-inset-
sayyy的专栏
02-15 9528
略
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值