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.chlooseLocation()在真机上不执行fail，还有cancel，只执行success。

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

**注:**成功后执行completa，失败或者取消不执行completa

3.点击按钮显示输入框，输入框自动聚焦，谈不起软键盘（弹起后马上又收回去）
可以先显示输入框，延迟100ms让输入框聚焦
4.组件属性设置不生效解决办法
（1）监听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听事件，获取组件内部变化的值，实时更新其绑定值

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

第二种解决方式在某些组件造成抖动，推荐第一种解决方式。
详见官方文档的使用Vue.js注意事项–常见问题–4.组件属性设置不生效解决方法。
链接：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来进行覆盖，但是不支持嵌套，可以进入原生窗体，为了不影响性能，原生窗体最好不多于三个。