uniapp的那些坑

哆来A梦没有口袋

已于 2025-03-12 10:25:33 修改

阅读量1.4w

点赞数 21

分类专栏： uniapp web前端文章标签： tabBar样式不起作用 uniapp禁止遮罩层滚动输入框被键盘遮住 uni不能跳转 uniapp页面占满修改背景色 tabbar编译到app空白 uniapp公共scss不起效

于 2020-07-01 12:06:40 首次发布

本文链接：https://blog.csdn.net/qq_42625428/article/details/107060379

版权

web前端同时被 2 个专栏收录

66 篇文章

订阅专栏

uniapp

17 篇文章

订阅专栏

1.selectedColor不起作用

1.查看位置是否写对，与lis同级

2.是否为16进制，selectedColor写的rgb不支持

3.是否被其他样式覆盖，其他地方也设置过selectedColor，可以全局搜索一下

2.pages中配置的颜色不起作用

注意，pages中的某些配置，是只支持某些颜色，或者是只支持16进制，当某个颜色不起作用，可以查看官网是否有颜色的限制，或者切换成white,black,16进制试试

3.input框被输入键盘覆盖

如：

input这些输入框，有一个自带的属性，可以设置键盘到输入框的距离

如：

设置样式后正常

4.有遮罩层时，禁止滚动

自己写的遮罩，会出现滚动，导致遮罩层出问题

解决方案：方法写空也没有关系 @touchmove.stop.prevent="moveHandle"

5.设置pages铺满

使用vh单位 - 100vh

6.设置单个页面的背景色

直接在单个页面的样式中

7.设置position为fixed的时候，设置了top,总是不是预期效果

那是因为默认uniapp的顶部高度是44px,你的定位是相对于页面的最顶端，而不是他配置之后的剩余页面，因此你的定位的高度，如果是fixed,其实应该是默认是top值要加上顶部导航栏高度的啦

8.取消了顶部导航栏，出现页面和手机基本信息(信号，时间等)重合

设置取消导航栏

       {
			"path": "pages/addressBook/myInfoDetail", //个人通讯录详情
			"style": {
				"app-plus": {
					"titleNView": false
				}
			}
		},

取消导航栏后页面在手机的效果

解决方案，页面上面写样式占位 - css的变量会自动获取到手机顶部信息栏的高度

<view class="status_bar">
	<view class="top_view">
	</view>
</view>


.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #186ff2;
	top: 0;
	z-index: 999;
}

9.uni.navigateTo无法跳转

原因又几个 -

第一，查看你跳转的路径是不是是tabBar的路径（官网上标注了，是不能用navigateTo去跳转tabBar配置的路径，跳转tab配置的页面 - uni.switchTab(OBJECT)）

第二，查看当前的语法是否错误，你的url是都正确

      goDeal() {
				uni.navigateTo({
					url: './deal'
				})
			}

第三，查看pages..json中的路径是否正确

只有都配置对了才可以正确跳转哦

如果是想看pages的配置，怎么配置导航栏以及有些什么配置移步一下这篇记录吧！， - uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp功能

10.uniapp的富文本，不支持vedio标签，因此uniapp自带的富文本不能上传视频

11，uniapp的请求uni.request是不支持直接传formData的

因此要想上传formData,需要将修改为如下

12.控制自带的返回按钮去自己想要的页面会出现白屏

解决方法 - 加上延时器，并且返回为true阻止自带得默认行为

13.下拉刷新在app端没有效果

注意，scroll-view有自己的下拉刷新，如果是原生配置像下面配置使用的，在页面中就不能用scroll-view了


{
			"path": "pages/commonComponents/DynamicForm/index", //公共表单首页
			"style": {
				"enablePullDownRefresh": true, //可以下来刷新
				"titleNView": {
					"titleColor": "#ffffff",
					"titleText": "",
					"backgroundColor": "#186ff2"
				},
				"navigationStyle": "default",
				"pullToRefresh": {  //下来刷新样式
					"support": true,
					"style": "default",
					"offset": "70px",
					"color": "#007AFF",
					"contentdown": {
						"caption": ""//下拉可刷新自定义文本
					}
				}
			}


onPullDownRefresh(){
			// console.log('onpull')
			if(this.TabCur == 0){
				uni.stopPullDownRefresh()
				return
			}
			this.$nextTick(() => {
				this.$refs.approvalDate.getList();
				setTimeout(() => {
					uni.stopPullDownRefresh()
				})
			})

也就是说scroll-view可以定义自己的刷新，也可以使用原生配置刷新，但是不能进行混合使用哦

scroll-view的下拉刷新有自己的定义事件，如下

14.注意uniapp的api支持的范围，有些是只支持h5。

所以想要实现富文本上传视频啊，附件上传，附件预览等等功能看下面这篇

uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp功能

15.绑定点击事件不起作用，或直接被触发多次 - @click.native（原生绑定）

<view class="form_button flex_a" v-if="showSearchList">
	<u-button @click.native="searchSubmit">确定{{searchChooseNum}}</u-button>
</view>

16.scroll-view不起作用

<view class="home-menus">
	<scroll-view scroll-x="true" class="home-menus-content">
		<image v-for="(item, index) in imgs" :key="index" :src="item"></image>
	</scroll-view>
</view>

给父元素 - home-menus添加一个css