vant: Skeleton加载优化
in 前端 with 0 comment

vant: Skeleton加载优化

in 前端 with 0 comment

1.png

Skeleton骨架屏是常用的Loading加载状态,但是在接口返回极快的情况下页面会出现闪屏。

这里记录一下优化的方法:

1.首先新增两个组件方法:showLoadinghideLoading

export default class SkeletonDemo extends Vue {
    showLoading () {}

    hideLoading () {}
}

2.新增一个变量minLoadTime,用来设置最短的显示时间,这里设置为300毫秒

export default class SkeletonDemo extends Vue {
    minLoadTime = 300

    showLoading () {}

    hideLoading () {}
}

3.新增一个变量loadTime,用来记录上次loading的时间。在调用showLoading方法时记录一下开始时间

export default class SkeletonDemo extends Vue {
    loadTime = 0
    minLoadTime = 300

    showLoading () {
        this.loadTime = new Date().getTime()
    }

    hideLoading () {}
}

4.重点来了:在结束loading时判断结束时间和开始时间的差值,差值 >=minLoadTime则关闭Skeleton显示,否则等待差值的时间后再显示

export default class SkeletonDemo extends Vue {
    loadTime = 0
    minLoadTime = 300

    showLoading () {
        this.loadTime = new Date().getTime()
    }

    hideLoading () {
        // 小于差值时定义一个setTimeout,等待差值后再执行逻辑
        if (new Date().getTime() - this.loadTime < this.minLoadTime) {
            // 计算时间差
            const interval = this.loadTime + this.minLoadTime - new Date().getTime()
            setTimeout(() => {
                // 业务逻辑...
            }, interval)
            return // 终止运行,防止重复运行业务
        }
        // 业务逻辑...
    }
}
Comments are closed.