uniapp movable-view设置x值失效问题

用movable-view做滑动验证的时候,重新更新图片,设置movable-view x属性的值为0时发现,上次滑动的位置不归位。
uniapp 官网给出了方法和原因:
原因:

原因1:
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置
为0,只有第一次能顺利返回顶部。这和props的单向数据流特性有关,组件内部scroll-top的实际值改动
后,其绑定的属性并不会一同变化。

原因2(难怪会遇到奇怪问题):
由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为
了方便高性能的实现拖动,平台特封装了movable-area组件。

解决办法:

方法1:监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
		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: function(e) {
      // 如果使用此方法,请自行增加防抖处理
        this.scrollTop = e.detail.scrollTop
    },
    goTop: function(e) {
        this.scrollTop = 0
    }

但是还是解决不了x赋值为0,不归位的问题,于是:

//形成一个变动的值,问题解决
this.x = this.x == 0 ? 0.1 : 0;

大致原因是x初始值为0,再次赋值还是为0,子组件对属性的监听函数未启动,

参考链接:https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值