uni-app使用总结

uni-app使用总结

遇到的问题

样式问题

1、组件和调用此组件的页面样式最好不要重名，不然会有样式覆盖问题。
2、数据绑定变量的时候不能识别upx，可以转化

computed：{
	minWidth（）{
		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(){
			//不执行
			conaole.log（‘取消’）
		}，
		success:function(){
			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
	},
	gotTop:function(e){
		this.scrollTop = this.old.scrollTop
		this.$nextTick(function(){
			this.scrollTop = 0
		)}
	}
}

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

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

第二种解决方法在默写组件可能造成抖动，推荐第一种解决办法。

5、禁止蒙版下的页面滚动
（1）可使用@touchmove.stop.prevent=“moveHandle”,moveHandle可以用来处理touchmove的时间，也可以是一个空函数。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

缺点：如果遮罩层中的modal也需要滚动时，上面的办法失效。
（2）蒙版中需要滚动的内容用scroll-view标签，蒙版下需要滚动的内容也用scroll-view标签（需设置高度，不能产生页面滚动条），再加上（1）中阻止滚动的方法
缺点：不能使用页面的刷新加载方法，只能用scroll-view的触底方法。
（3）蒙版中需要滚动的内容用scroll-view标签，加上（1）中阻止滚动的方法
缺点：当蒙版中标滚动内容触底或者到顶部后，页面开始滚动