uniapp 踩坑记录

最新推荐文章于 2024-06-18 17:15:03 发布

云在青天水在瓶_

最新推荐文章于 2024-06-18 17:15:03 发布

阅读量179

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_57407439/article/details/133928907

版权

记录自己用uniapp开发微信小程序、H5踩的各种坑

uniapp vue 的 ref绑定不能用于内置组件 (view这些) ；
uni-app修改data里的数组某个值要用 this.$set(this.arr, index, value)；
uniapp 只能获取DOM，不能操作DOM元素；
uniapp 编译为微信小程序时边框样式显示不全，上边框消失（ios）问题解决方案：transform: rotateZ(360deg) 或使用before、after伪元素模拟；
在scroll-view标签内使用uni-popup组件，在微信小程序真机环境下会被scroll-view的兄弟元素遮挡，此时给uni-popup组件外套一个root-portal组件即可；

<root-portal>
 		<uni-popup ref="uniPopupRef" type="center">
		</uni-popup> 
</root-portal>

uniapp的switch组件阻止默认切换事件，即在切换之前进行逻辑判断，不用@change事件，改为click事件，并将switch禁用（disabled）

<switch :checked="item.status" disabled @click="change"/>

开发H5时，对于一个列表多选框全选和取消全选业务

   	<checkbox :checked="selectTag" @click="checkAllTagBtn"><text>全选</text></checkbox>
   	<checkbox-group @change="changeTag">
   		<checkbox v-for="item, index in tag" :key="index" :value="item" :checked="checkedTagStatus[index]" @click="checkTagBtn(index)"><text>{{item}}</text>        
           </checkbox>
   	</checkbox-group>

		data() {
			return {
                tag: [],
				checkedTagStatus: [],
				selectName: false,
			}
		},
        watch: {
			checkedTagStatus(n) {
				let flag = true;
				if(n.length) {
					for (let i = 0; i < n.length; i++) {
						if(!n[i]) {
							flag = false;
							break;
						}
					}
					this.selectTag = flag
				} else {
					this.selectTag = false
				}
			}
		},
        methods: {
            checkAllTagBtn() {
				if(this.selectTag) {
					this.checkedTagStatus.forEach((i,index) => {
						if(i) {
							this.$set(this.checkedTagStatus, index, true)
							setTimeout(() => {
								this.$set(this.checkedTagStatus, index, false)
							})
						}
					})
				} else {
					this.checkedTagStatus.forEach((i,index) => {
						this.$set(this.checkedTagStatus, index, true)
					})
				}
			},
        }