首页/ 填坑/ 文章详情

微信小程序频繁setData赋值卡顿异常处理

Vue数据赋值有个双向绑定功能,即时修改,同步更新。可数据过度繁频赋值,数据赋值失效,这种情况经常出现定时倒计时,需要额外强制赋值。

JSthis.$forceUpdate();//强制赋值,刷新数据

项目需求:

添加个返回顶部按钮,按钮不在顶部时,显示;滑动时,切换模式2;停止时,切换模式1。

功能很简单,监听onPageScroll事件,修改按钮模式。于是乎犯了微信开发人员都犯的错:过度setData赋值,程序卡顿

setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。

微信小程序使用setData时,明确指出setData调用频率:每秒调用setData的次数不超过 20 次。想要解决卡顿问题,主要减少setData赋值次数,触发滚动第一时间,记录滚动状态,尽量只做一次赋值。

JSlet timer = null;

Page({
    data: {  
        returnTop: { show: false, status: 'stop', translateYP: 'translateY(-88rpx)',translateYG: 'translateY(0)'  }
    },
    onPageScroll: function(e) { // 监听滚动事件
        if(this.data.returnTop.status == 'stop') {
            this.setData({'returnTop.status': 'move'});
            if(e.scrollTop == 0) {
                this.setData({'returnTop.show': false});
            } else{
                this.setData({'returnTop.show': true});
                this.setData({'returnTop.translateYP': 'translateY(0)', 'returnTop.translateYG': 'translateY(88rpx)'})
            }
        }
    
        let _this = this;
        clearTimeout(timer)
        timer = setTimeout(function() {
            _this.isScrollEnd()
        }, 100)
    },
    isScrollEnd: function(){  // 滚动停止
        //console.log("滚动停止")
        this.setData({
            'returnTop.status': 'stop',
            'returnTop.translateYP': 'translateY(-88rpx)',
            'returnTop.translateYG': 'translateY(0)'
        })
    },
})

监听滚动停止:

微信小程序没有提供滚动停止回调事件,在这里利用定时器的时间差,滚动时,清空定时器,触发定时器,形成个闭环,只有最后一次会被触发。

每个功能其实不存在简单的说法,不要掉以轻心,认为很快完成。往往深入开发后,你才会了解其中的门门道道,稍不留神,今晚得努力加班完成。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)