uniapp-H5项目的坑

先推荐个插件库-非常好用:https://ext.dcloud.net.cn/

一、uniapp h5 适配pc端
1、问题:屏幕尺寸在400px~960px之间页面排版错乱
2、解决方法:在page.json文件中

"globalStyle": {"navigationStyle": "custom","navigationBarTextStyle": "white","navigationBarTitleText": "xxxx项目App","navigationBarBackgroundColor": "#FFFFFF",// 以下代码是解决H5适配排版错乱问题的代码"rpxCalcMaxDeviceWidth": 0, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750}

二、uniapp h5 在手机上底部导航栏上下抖动
1、问题:原因不详
2、解决方法:在App.vue中加入如下代码

<style lang="scss">
page{height: 100vh !important;
}
</style>

三、uniapp h5 适配 Ios底部小黑条
1、问题:安卓没有小黑条、Ios有小黑条
2、解决方法:在App.vue 样式中加入如下代码

padding-bottom: constant(safe-area-inset-bottom) !important;/*兼容 IOS<11.2*/padding-bottom: env(safe-area-inset-bottom) !important;/*兼容 IOS>11.2*//* 可以通过margin-bottom来适配 */margin-bottom: constant(safe-area-inset-bottom) !important;margin-bottom: env(safe-area-inset-bottom) !important;/* 或者改变高度*/// height: calc(55px + constant(safe-area-inset-bottom));// height: calc(55px + env(safe-area-inset-bottom));height: calc(25px +constant(safe-area-inset-bottom)) !important;height: calc(25px +env(safe-area-inset-bottom)) !important;// height: 100vh !important;@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {.bottom-button {margin-bottom: constant(safe-area-inset-bottom) !important;margin-bottom: env(safe-area-inset-bottom) !important;}}

四、判断机型的方法(ios还是安卓-可做一些适配)

	myapp() {console.log('机型', uni.getSystemInfoSync().platform)if (uni.getSystemInfoSync().platform == 'ios') {// iosreturn true}// 安卓return false},

五、uni-easyinput输入框
1、问题:uniapp 原生组件库的输入框 默认输入最大是140字符
2、想要输入字符不受限制(加maxlength=‘-1’)

			<uni-easyinput  type="textarea" v-model="value" maxlength='-1' placeholder="请输入内容"></uni-easyinput>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv8训练自己的数据集(超详细)

一、准备深度学习环境 本人的笔记本电脑系统是&#xff1a;Windows10 YOLO系列最新版本的YOLOv8已经发布了&#xff0c;详细介绍可以参考我前面写的博客&#xff0c;目前ultralytics已经发布了部分代码以及说明&#xff0c;可以在github上下载YOLOv8代码&#xff0c;代码文件夹…

LVM和磁盘配额

一&#xff1a;LVM概述&#xff1a; LVM 是 Logical Volume Manager 的简称&#xff0c;译为中文就是逻辑卷管理。 能够在保持现有数据不变的情况下&#xff0c;动态调整磁盘容量&#xff0c;从而提高磁盘管理的灵活性 /boot 分区用于存放引导文件&#xff0c;不能基于LVM创建…

MongoDB vs MySQL:项目选择哪一个数据库系统?

由于市场上有各种可用的数据库&#xff0c;用户经常会就MongoDB与MySQL进行辩论&#xff0c;以找出更好的选择。 使用MySQL等关系数据库的组织在根据不断变化的需求管理和存储数据时可能会面临一定的困难。同时&#xff0c;新公司想知道选择什么数据库&#xff0c;这样他们就不…

【ArcGIS微课1000例】0085:甘肃省白银市平川区4.9级地震震中位置图件制作

据中国地震台网正式测定,12月31日22时27分在甘肃白银市平川区发生4.9级地震,震源深度10公里,震中位于北纬36.74度,东经105.00度。 文章目录 一、白银市行政区划图1. 县级行政区2. 乡镇行政区二、4.9级地震图件制作1. 震中位置2. 影像图3. 震中三维地形一、白银市行政区划图…

【LLM 】7个基本的NLP模型,为ML应用程序赋能

在上一篇文章中&#xff0c;我们已经解释了什么是NLP及其在现实世界中的应用。在这篇文章中&#xff0c;我们将继续介绍NLP应用程序中使用的一些主要深度学习模型。 BERT 来自变压器的双向编码器表示&#xff08;BERT&#xff09;由Jacob Devlin在2018年的论文《BERT:用于语言…

数据结构初阶之栈和队列(C语言版)

数据结构初阶之栈和队列&#xff08;C语言版&#xff09; ✍栈♈栈的结构设计♈栈的各个接口的实现&#x1f47a;StackInit(初始化)&#x1f47a;push&#xff08;入栈&#xff09;&#x1f47a;pop&#xff08;出栈&#xff09;&#x1f47a;获取栈顶元素&#x1f47a;获取栈中…

软件工程期末总结

软件工程期末总结 软件危机出现的原因软件生命周期软件生命周期的概念生命周期的各个阶段 软件开发模型极限编程 可行性研究与项目开发计划需求分析结构化分析的方法结构化分析的图形工具软件设计的原则用户界面设计结构化软件设计面向对象面向对象建模 软件危机出现的原因 忽视…

7.13N皇后(LC51-H)

算法&#xff1a; N皇后是回溯的经典题 画树&#xff1a; 假设N3 皇后们的约束条件&#xff1a; 不能同行不能同列不能同斜线 回溯三部曲&#xff1a; 1.确定函数参数和返回值 返回值&#xff1a;void 参数&#xff1a; int n&#xff1a;题目给出&#xff0c;N皇后的…

骨传导蓝牙耳机什么牌子好用?为你揭晓不踩雷的骨传导耳机排行

喜欢运动的朋友们&#xff0c;你们一定不能错过骨传导耳机&#xff01;它真的是我们运动时的好帮手。为什么这么说呢&#xff1f;因为它不会像普通耳机那样塞住我们的耳朵&#xff0c;让我们在运动时感觉不舒服&#xff0c;甚至伤害耳朵。而且&#xff0c;它还可以帮助我们听到…

QT+OSG/osgEarth编译之六十七:dds+Qt编译(一套代码、一套框架,跨平台编译,版本:OSG-3.6.5插件库osgdb_dds)

Qt+OSG/osgEarth跨平台编译(用Qt Creator组装各个库,实现一套代码、一套框架,跨平台编译)_qt + osgearth安装-CSDN博客 目录 1、dds介绍 2、文件分析 3、pro文件 4、编译实践 <

go 使用 sync.RWMutex

使用 sync.RWMutex 简介使用注意点 简介 简述读写锁的使用&#xff0c;以及注意点 使用 在读操作的时候 加读锁&#xff0c; 在写操作的时候加写锁&#xff0c; 举例: 多个协程需要读取、写入的操作 // 读操作 func reader(id int) {for {rwMutex.RLock()fmt.Printf("R…

如何选择适用于光束分析应用的工业相机?

为光束质量分析系统选择合适的相机时&#xff0c;需要考虑许多关键特性。例如&#xff1a; ◈ 合适的波长范围&#xff1a;支持准确拍摄和测量所需波长的光束。 ◈ 高空间分辨率&#xff1a;更好地分析光束特征&#xff0c;如光束宽度、形状和强度分布。 ◈ 合适的传感器尺寸…

ClickHouse基础知识(七):ClickHouse的分片集群

副本虽然能够提高数据的可用性&#xff0c;降低丢失风险&#xff0c;但是每台服务器实际上必须容纳全量数据&#xff0c;对数据的横向扩容没有解决。 要解决数据水平切分的问题&#xff0c;需要引入分片的概念。通过分片把一份完整的数据进行切 分&#xff0c;不同的分片分布到…

Sectigo和Certum的区别

为了保护用户在互联网的隐私&#xff0c;网站使用SSL数字证书为http明文传输协议加上安全套接层&#xff0c;对网站传输数据加密。Sectigo和Certum是正规的CA认证机构&#xff0c;它们颁发的SSL证书经过市场认证&#xff0c;已经兼容大多数浏览器以及终端&#xff0c;今天就随S…

SSH 连接与RDP连接

SSH 连接 配置 Linux 上的 SSH 服务: 在 Linux 系统上&#xff0c;您需要确保安装并启动 SSH 服务器&#xff08;通常是 OpenSSH&#xff09;。您需要知道 Linux 机器的 IP 地址和 SSH 服务的端口号&#xff08;默认是 22&#xff09;。 在 Windows 上使用 SSH 客户端: 您可以…

令人吃惊的SLM34x系列SLM340CK-DG 通过国际安全标准兼容光耦的单通道隔离驱动器

40V, 1A兼容光耦的单通道隔离驱动器SLM34x系列SLM340CK-DG产品已通过UL1577认证&#xff0c;通过UL1577安规标准的认可&#xff0c;意味着产品已符合相关的国际安全标准&#xff0c;在产品质量及可靠性上。 关于UL1577科普&#xff1a; UL1577规范适用于光隔离器、磁隔离器以…

同城拼车约车顺风车/同城顺风车小程序/顺风车小程序/拼车小程序

同城拼车约车顺风车/同城顺风车小程序/顺风车小程序/拼车小程序 演示小程序搜索:上车信息 可以打开封装APP 套餐一:源码+包安装+包过审(无需许可证)=300 套餐二:全包服务 包服务器+域名+APP+免费认证小程序+H5+PC=800 包审核 PC端联系客服看 PC端+H5+公众号+小程序…

深度生成模型之自编码器与变分自编码器 ->(个人学习记录笔记)

文章目录 深度生成模型之自编码器与变分自编码器自编码器AE1. 定义2. 自编码器的应用 变分自编码器(VAE)1. 理论求解2. 模型求解3. 优化目标4. 再参数化策略 AE与VAE的对比AE与VAE的主要局限性 深度生成模型之自编码器与变分自编码器 自编码器AE 1. 定义 Auto-Encoder&#…

线性代数_对角矩阵

对角矩阵是线性代数中一种特殊的矩阵类型&#xff0c;它在数学理论和实际应用中都有着重要的地位。对角矩阵的定义如下&#xff1a; 设 \( A \) 是一个 \( n \times n \) 的方阵&#xff0c;如果满足除主对角线上的元素外&#xff0c;其他元素都为零&#xff0c;即 \( A_{ij} …

C语言---扫雷(Minesweeper)

扫雷 1 了解扫雷游戏1.1 基本规则1.2 基础知识1.2.1字符相减 2 实现过程1.1 棋盘设定1.2 初始化棋盘1.3 打印棋盘1.4 放置雷1.5 排查雷1.6 game()函数 3 完整代码3.1 Minesweeper.h3.2 Minesweeper.c3.3 Test.c 4 参考 1 了解扫雷游戏 点击右侧进入扫雷游戏网页版 1.1 基本规…