uni-app 常见问题及解决方法

最新推荐文章于 2025-06-19 17:49:14 发布

会飞的猪~~

最新推荐文章于 2025-06-19 17:49:14 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app js 前端文章标签：前端 javascript html uni-app css

本文链接：https://blog.csdn.net/qq_41578884/article/details/119822150

uni-app 同时被 3 个专栏收录

9 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细解析了uni-app中常见的问题，如CSS/JS条件编译、底部tabBar调整、深拷贝原理、数组去重方法、日期比较、数据同步更新等，并提供了针对性的解决方案。此外，还涉及了输入法键盘遮挡、手机号验证和UI调整等内容。

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

uni-app 常见问题及解决方法

1.条件

（1）.css条件编译

/* #ifdef H5 */
	bottom: 100upx;
/* #endif */

（2）.js条件编译

// #ifdef H5
 console.log("H5会执行此段代码")
// #endif

（3）.view条件编译

<!-- #ifdef MP-WEIXIN -->
<button class="imgBox" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">
  <image class="ImgL" src="../../static/icon/wechat.png">
</button>
<!-- #endif -->

2.H5底部tabBar遮挡部分内容

padding-bottom: calc(var(--window-bottom) - 2rpx);

3.深拷贝

同时申明两个数组或其他类型数据，将数组一赋值给数组二，改变数组二某一项值界面上却没有发生变化。（理解存储原理）

let newArray = new Array();
let _obj = JSON.stringify(this.subHead),
objClone = JSON.parse(_obj);
newArray = objClone;

4.数组去重

简单数组去重

moduleIdArr=[...new Set(moduleIdArr)]

复杂数组去重

let resData = new Map();
moduleIdArr = (moduleIdArr.filter((moduleIdArr) => !resData.has(moduleIdArr.moduleId) && resData.set(moduleIdArr.moduleId, 1)))

5.比较两个格式化时间大小（YY-MM-DD）

new Date("2020-11-11").getTime() <= new Date("2020-12-12").getTime()

6.数组数据发生变化，界面未渲染

// 数组名、索引、改变的内容
this.$set(this.mainHead, index, this.mainHead[index]);

7.手机号正则

let phoneTrue = (/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phoneNumber))

8.input框被输入法键盘遮挡

// 添加类uni-input 和 cursor-spacing（指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离）
<input class="uni-input" cursor-spacing="10" type="number" v-model="phoneNumber" placeholder="请输入手机号码" placeholder-class="inputPlaceholder" />