当前位置:   article > 正文

uni-app使用总结_uniapp @touchmove.stop

uniapp @touchmove.stop

我在uni-app遇到的问题

样式问题

1、组件和调用此组件的页面样式最好不要重名,不然会有样式覆盖问题。
2、数据绑定变量的时候不能识别upx,可以转化(官网最新更正单位为rpx
computed: {
    halfWidth() {
        return uni.upx2px(750 / 2) + 'px'; //350upx
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
3、css获取状态栏的高度var(–status-bar-height)

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

4、scroll-view标签中不能嵌套position:fixed;的元素
5、border小于1px的元素在ios上显示不全,最好不要设置1rpx

事件问题

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('完成');
	}
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注:成功后执行complete,失败或者取消不执行complete

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

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

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

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

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
  • 1
methods: {
	scroll: function(e) {
		this.old.scrollTop = e.detail.scrollTop
	},
    goTop: function(e) {
        this.scrollTop = this.old.scrollTop
        this.$nextTick(function() {
        	this.scrollTop = 0
        });
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
  • 1
methods: {
    scroll: function(e) {
        this.scrollTop = e.detail.scrollTop
    },
    goTop: function(e) {
        this.scrollTop = 0
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

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

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

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

 缺点:如果遮罩中的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来进行覆盖。目前原生组件均已支持同层渲染,建议使用 view 替代。具体可查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
  5+app端的原生组件有video。也可以用cover-view、cover-image来进行覆盖,但是不支持嵌套,可以引入原生子窗体,为了不影响性能,原生子窗体最好不多于三个。

7、app端部分机型touchend事件不能触发。
8、watch实时监听输入框的值,一经改变就去触发接口请求,发现请求参数不是最新的值。

在watch监听请求接口时加个延迟,可以解决。

watch:{
	keyWords(newVal,oldVal){
		let that = this;
		if(that.searchTimer){
			clearTimeout(that.searchTimer); //清空定时器
		}
		that.searchTimer = setTimeout(function() {
			// 请求接口
			that.pageNo = 1;
			that.isLoadMore = true;
			that.loadList();
		},300)
	}
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/445079?site
推荐阅读
相关标签
  

闽ICP备14008679号