uni-app使用总结

布满荆棘的人生 2021-12-03 02:37 188阅读 0赞

我在uni-app遇到的问题

## 样式问题 ##

#### 1、组件和调用此组件的页面样式最好不要重名，不然会有样式覆盖问题。 ####

#### 2、数据绑定变量的时候不能识别upx，可以转化 ####

computed: { 
        halfWidth() { 
            return uni.upx2px(750 / 2) + 'px'; //350upx
        }
    }

#### 3、css获取状态栏的高度var(–status-bar-height) ####

小程序中是固定25px;；5+app是真实状态栏高度；H5是0；  
注：真机才管用

## 事件问题 ##

#### 1、blur事件比页面的点击事件慢 ####

input、textarea获取值的时候用 **v-model** 双向绑定，或者用 **input** 事件，尽量少用blur事件；

#### 2、uni.chooseLocation() ####

uni-app的uni.chooseLocation()在真机上不执行 **fail** ，还有 **cancel** ，只执行success。

uni.chooseLocation({ 
    	fail:function(){   //不执行
    		console.log('失败');
    	},
    	cancel:function(){  //不执行
    		console.log('取消');
    	},
    	success: function(res){ 
    		console.log('成功');
    	},
    	complete:function(){  //成功后
    		console.log('完成');
    	}
    })

注：成功后执行complete，失败或者取消不执行complete

#### 3、点击按钮显示输入框，输入框自动聚焦，弹不起软键盘（弹起后马上又收回去） ####

可以先显示输入框，延迟100ms让输入框聚焦。

#### 4、组件属性设置不生效解决办法 ####

（1）监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值。

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

methods: { 
    	scroll: function(e) { 
    		this.old.scrollTop = e.detail.scrollTop
    	},
        goTop: function(e) { 
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() { 
            	this.scrollTop = 0
            });
        }
    }

（2）监听scroll事件，获取组件内部变化的值，实时更新其绑定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

methods: { 
        scroll: function(e) { 
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) { 
            this.scrollTop = 0
        }
    }

第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。  
详见官方文档的使用Vue.js注意事项——常见问题——4. 组件属性设置不生效解决办法。  
链接：[uni-app官方文档][uni-app]

#### 5、禁止蒙版下的页面滚动 ####

（1）可使用 @touchmove.stop.prevent=“moveHandle”，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

缺点：如果遮罩中的modal也需要滚动时，上面的办法失效。

（2）蒙版中需要滚动的内容用scroll-view标签，蒙版下需要滚动的内容也用scroll-view标签（需设置高度，不能产生页面滚动条），再加上（1）中阻止滚动的方法。

缺点：不能使用页面的刷新加载方法，只能用scroll-view的触底方法。

（3）蒙版中需要滚动的内容用scroll-view标签，加上（1）中阻止滚动的方法。

缺点：当蒙版中滚动内容触底或者到顶部后，页面开始滚动。

#### 6、原生组件的层级问题 ####

微信小程序端的原生组件有camera、canvas、input（仅在focus时表现为原生组件）、live-player、live-pusher、map、textarea、video。可以用cover-view、cover-image来进行覆盖。  
  5+app端的原生组件有video。也可以用cover-view、cover-image来进行覆盖，但是不支持嵌套，可以引入原生子窗体，为了不影响性能，原生子窗体最好不多于三个。

#### 7、app端部分机型touchend事件不能触发。 ####

[uni-app]: https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98