当前位置: 首页 > news >正文

微信小程序 -- ios 底部小黑条样式问题

问题:

在这里插入图片描述
如图,ios有的机型底部伪home键会显示在按钮之上,导致点击按钮的时候误触

解决:

  1. App.vue
<script>export default {wx.getSystemInfo({success: res => {let bottomHeight = res.screenHeight - res.safeArea.bottom;uni.setStorageSync('bottomHeight', bottomHeight)console.log('小黑条高度', bottomHeight);},fail(err) {console.log(err);}})},}
</script><style>/*每个页面公共css */@import url("static/css/base.css");
</style>
  1. 有样式问题需要修改的页面

我这里写的是:如果不是有小黑条的机型(也就是bottomHeight===0的机型),那么我的paddingBottom设为10px;如果有的话,那么paddingBottom就设为小黑条的高度bottomHeight

<template><view @click="submit" :style="{paddingBottom:(bottomHeight===0?'10px':bottomHeight+'px')}"><view>提交</view></view>
</template><script>export default {data() {return {bottomHeight:0, // 底部小黑条高度}},onLoad() {this.bottomHeight = uni.getStorageSync('bottomHeight')||0;console.log('底部小黑条高度',this.bottomHeight)},}
</script><style scoped lang="scss">
</style>

效果图

在这里插入图片描述

参考

vue动态添加style样式

【对象】

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

html :style="{color:(index==0?conFontColor:'#000')}"

【数组】

html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

【三目运算符】

html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

【多重值】
此时,浏览器会根据运行支持情况进行选择

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

【绑定data对象】

  • html :style=“styleObject”
data() {return{styleObject: {color: 'red',fontSize: '13px'}  }
}

————————————————
原文:https://juejin.cn/post/6844903921509466120

小黑条适配

在移动端开发过程中,经常遇到iphone11、iphoneX底部小黑条遮挡页面底部,纯css实现设备的适配。详见我的上篇文章。

在开发微信小程序中,也会遇到iPhone全面屏手机,底部小黑条会遮挡页面底部,尽管微信小程序已经实现部分页面的适配,但个别页面仍旧需要做适配处理。

解决方案:使用wx.getSystemInfoSync()中的screenHeightsafeArea对象的bottom属性判断

  • screenHeight是获取屏幕的高度,因为bottom是以屏幕左上角为原点开始计算的,所以需要的是屏幕高度。

  • safeArea对象的bottom属性是安全区域右下角纵坐标。

  • screenHeight减去safeArea对象的bottom属性,则是底部小黑条的高度。

获取底部小黑条的高度,全局存储使用。

在全局app.js里,需要全局存储一个数据

globalData: {bottomHeight:0
}

2.在全局app.js的onLaunch函数:

wx.getSystemInfo({success: res => {this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;},fail(err) {console.log(err);}
})

3.在所需页面的js文件从全局变量中获取

onLoad: function (options) {this.setData({bottomHeight : app.globalData.bottomHeight })}

4.在所需页面的wxml里面使用:

<view class="page" style="padding-bottom:{{bottomHeight }}px">

————————————————

原文链接:https://blog.csdn.net/u014213847/article/details/129159964

未整理参考

相关文章:

微信小程序 -- ios 底部小黑条样式问题

问题&#xff1a; 如图&#xff0c;ios有的机型底部伪home键会显示在按钮之上&#xff0c;导致点击按钮的时候误触 解决&#xff1a; App.vue <script>export default {wx.getSystemInfo({success: res > {let bottomHeight res.screenHeight - res.safeArea.bott…...

白盒测试:探索软件内部结构的有效方法

引言&#xff1a; 在软件开发过程中&#xff0c;测试是确保软件质量的关键环节。传统的黑盒测试方法主要关注软件的功能和外部行为&#xff0c;而忽略了软件的内部结构和实现细节。然而&#xff0c;随着软件复杂性的增加&#xff0c;仅仅依靠黑盒测试已经无法满足项目的需求。因…...

图论-并查集

并查集(Union-find Sets)是一种非常精巧而实用的数据结构,它主要用于处理一些不相交集合的合并问题.一些常见的用途有求连通子图,求最小生成树Kruskal算法和最近公共祖先(LCA)等. 并查集的基本操作主要有: .1.初始化 2.查询find 3.合并union 一般我们都会采用路径压缩 这样…...

redis-学习笔记(Jedis 通用命令)

flushAll 清空全部的数据库数据 jedis.flushAll();set & get set 命令 get 命令 运行结果展示 exists 判断该 key 值是否存在 当 redis 中存在该键值对时, 返回 true 如果键值对不存在, 返回 false keys 获取所有的 key 值 参数是模式匹配 *代表匹配任意个字符 _代表匹配一…...

C语言:高精度乘法

P1303 A*B Problem - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 第一次画图&#xff0c;略显简陋。 由图可以看出c的小标与x,y下标的关系为x的下标加上y的下标再减一。 由此得到&#xff1a; c [ i j - 1 ] x [ i ] * y [ j ]x #include<stdio.h> #include<st…...

UE4 Niagara学习笔记

需要在其他发射器的同一个粒子位置发射其他粒子就用Spawn Particles from other Emitter 把发射器名字填上去即可 这里Move to Nearest Distance Field Subface GPU&#xff0c;可以将生成的Niagara附着到最近的物体上 使用场景就是做的火苗附着到物体上...

多维时序 | Matlab实现GA-LSTM-Attention遗传算法优化长短期记忆神经网络融合注意力机制多变量时间序列预测

多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实…...

LeetCode205. Isomorphic Strings

文章目录 一、题目二、题解 一、题目 Given two strings s and t, determine if they are isomorphic. Two strings s and t are isomorphic if the characters in s can be replaced to get t. All occurrences of a character must be replaced with another character wh…...

Event Driven设计模式

EDA&#xff08;Event-Driven Architecture&#xff09;是一种实现组件之间松耦合、易扩展的架构方式。一个最简单的EDA设计需要包含如下几个组件&#xff1a; Events&#xff1a;需要被处理的数据。一个Event至少包含两个属性&#xff0c;类型和数据&#xff0c;类型决定了Eve…...

PostgreSql 设置自增字段

一、概述 序列类型是 PostgreSQL 特有的创建一个自增列的方法。包含 smallserial、serial和 bigserial 类型&#xff0c;它们不是真正的类型&#xff0c;只是为了创建唯一标识符列而存在的方便符号。其本质也是调用的序列&#xff0c;序列详情可参考&#xff1a;《PostgreSql 序…...

什么是泊松图像混合

泊松图像混合&#xff08;Poisson Image Editing&#xff09;的原理基于泊松方程。该方法旨在保持图像中的梯度一致性&#xff0c;从而在图像编辑中实现平滑和无缝的混合。以下是泊松图像混合的基本原理和公式&#xff1a; 泊松方程 泊松方程是一个偏微分方程&#xff0c;通常…...

OpenAI 承认 ChatGPT 最近确实变懒,承诺修复问题

文章目录 一. ChatGPT 指令遵循能力下降引发用户投诉1.1 用户抱怨回应速度慢、敷衍回答、拒绝回答和中断会话 二. OpenAI 官方确认 ChatGPT 存在问题&#xff0c;展开调查三. OpenAI 解释模型行为差异&#xff0c;回应用户质疑四. GPT-4 模型变更受人事动荡和延期影响 一. Chat…...

创作活动(四十九)———低代码:美味膳食或垃圾食品?

#低代码&#xff1a;美味膳食或垃圾食品&#xff1f;# 一、什么是低代码 低代码是一种开发方法&#xff0c;通过可视化界面和少量的编码&#xff0c;使开发者能够快速构建应用程序。它的目标是提高开发效率、降低开发成本&#xff0c;并支持快速迭代和敏捷开发。 二、低代码的…...

【DL-TensorFlow遇错】TensorFlow中遇错合集

TensorFlow中遇错合集 一、AttributeError: module tensorflow has no attribute placeholder二、RuntimeError: tf.placeholder() is not compatible with eager execution. 一、AttributeError: module tensorflow has no attribute placeholder 错误原因 tensorflow版本问…...

pymysql代替mysqlclient,解决mysqlclient因版本不兼容无法安装成功而无法连接mysql的问题

pymysql代替mysqlclient&#xff0c;解决mysqlclient因版本不兼容无法安装成功而无法连接mysql的问题 原因&#xff1a;版本或者环境兼容问题&#xff0c;导致如centos或者其他Linux无法安装mysqlclient模块 解决办法&#xff1a;安装pymysql作为替代 在Django中连接MySQL数…...

uni-app 设置当前page界面进入直接变为横屏模式

首先 我们打开项目的 manifest.json 在左侧导航栏中找到 源码视图 然后找到 app-plus 配置 在下面加上 "orientation": [//竖屏正方向"portrait-primary",//竖屏反方向"portrait-secondary",//横屏正方向"landscape-primary",//横屏…...

Mysql的多表联合查询

内连接 隐式内连接 select column from tb1,tb2 where 条件; 显示内连接 关键字&#xff1a;[inner] join on 显示内连接与外连接的不同是新增的关键字&#xff0c;inner join 以及 使用on 替换了where select column from tb1 [inner] join tb2 on 条件; 外连接 左外…...

Linux上使用Python的requests库进行HTTP请求

在Linux上使用Python的requests库进行HTTP请求是一种非常方便和高效的方式。requests库是一个第三方库&#xff0c;用于发送HTTP请求并获取响应。下面是一个简单的示例&#xff0c;演示如何使用requests库发送GET请求并获取响应。 首先&#xff0c;你需要安装requests库。你可…...

图像处理领域的应用

图像处理领域的应用 文章目录 图像处理领域的应用1.图像类型2.图像转换3.彩色图像表示模式4.图像变换5.图像增强 1.图像类型 #mermaid-svg-x6mNS3Y1YkPvWUsQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-x6mNS3Y1…...

MySQL笔记-第18章_MySQL8其它新特性

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第18章_MySQL8其它新特性1. MySQL8新特性概述1.1 MySQL8.0 新增特性1.2 MySQL8.0移除的旧特性 2. 新特性1&#xff1a;窗口函数2.1 使用窗口…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

Neo4j 完全指南:从入门到精通

第1章&#xff1a;Neo4j简介与图数据库基础 1.1 图数据库概述 传统关系型数据库与图数据库的对比图数据库的核心优势图数据库的应用场景 1.2 Neo4j的发展历史 Neo4j的起源与演进Neo4j的版本迭代Neo4j在图数据库领域的地位 1.3 图数据库的基本概念 节点(Node)与关系(Relat…...

OpenHarmony标准系统-HDF框架之I2C驱动开发

文章目录 引言I2C基础知识概念和特性协议&#xff0c;四种信号组合 I2C调试手段硬件软件 HDF框架下的I2C设备驱动案例描述驱动Dispatch驱动读写 总结 引言 I2C基础知识 概念和特性 集成电路总线&#xff0c;由串网12C(1C、12C、Inter-Integrated Circuit BUS)行数据线SDA和串…...