用户体验优化之骨架屏

什么是骨架屏呢？

骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。

Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。

 

原理：css/animation+js/show

css:

.skeon {
     width: 100px;
     height: 16px;
     background-color: #f2f3f5;
     animation-duration: 1.5s;
     animation-name: blink;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
}
    
@keyframes blink {
     50% {
        opacity: 0.6;
     }
}

vue:

<view class="skeon" :loading="loading">content</view>   

<script>
    export default {
        data() {
            return {
                loading: true, // 是否显示骨架屏组件
            }
        },
        onLoad() {
            // 通过延时模拟向后端请求数据，调隐藏骨架屏
            setTimeout(() => {
                this.loading = false;
            }, 30000)
        }
    }
</script>

 

参考：https://zhuanlan.zhihu.com/p/74403911