前言
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
文章数据的加载,需要花费一定的时间,其中包括请求数据,高亮文本啊,美化格式啊,这些都需要时间,
等待数据加载的时候,页面就特别丑,比如
这是优化之前的,优化之后
用户体验明显要好一些。这个是怎么做到的呢?
使用了一个骨架屏组件
https://nutui.jd.com/2x/#/skeleton
具体骨架长什么样,由自己决定的,我们写一个
<div slot="list" v-if="isLoading">
<row padding="15px 10px 0">
<skeleton-square
width="360px"
height="10px"
:count="2"
></skeleton-square>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-circle
diameter="50px"
>
</skeleton-circle>
<column>
<skeleton-square
width="300px"
:count="2"
margin="5px 10px 5px 10px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<column>
<skeleton-square
width="350px"
:count="15"
margin="10px 10px 10px 10px"
></skeleton-square>
</column>
</row>
</div>
怎么决定这个骨架屏是否展示?我们在容器上加上一个判断, 如果 isLoading是true,就展示骨架屏
这个isLoading在data中初始化为true,所以一进来就是展示的效果。
什么时候关闭呢?当我们的数据拿到了,页面刷新完毕了,我们就展示。所以在
ArticleDetail.vue 的getArticleDetail方法里面,做修改
/**
* 查询文章数据,id从data中取出
* @returns {Promise<void>}
*/
async getArticleDetail() {
let result = await api.getArticleDetail(this.id)
this.articleInfo = result.data
//nextTick 是vue的一个方法,表示等页面渲染完毕后再执行
this.$nextTick(() => {
this.isLoading=false
})
}
除此之外,mounted中要修改一下,防止刷新后不出现效果
this.isLoading = true