vant: Skeleton加载优化

2021/02/08
- 编程
0阅读

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

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

1.首先新增两个组件方法：showLoading和hideLoading。

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 // 终止运行，防止重复运行业务
        }
        // 业务逻辑...
    }
}

vant: Skeleton加载优化

其他推荐内容

[记录]PrimeVue Theme的自定义方式

003.旋转数组

jq ajax的OPTIONS请求

评论区