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)'
        })
    },
})

监听滚动停止：

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

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