首页/ 填坑/ 文章详情

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

微信 小程序 setData 赋值 卡顿 发布于 2021-08-26

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

唐牛才是食神唐牛才是食神 06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到