前言
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
同上一节文章加载优化,首页这部分我们也做一个骨架屏展示。
步骤与上一节相同,主要是骨架屏的编写
设计成这样的效果。主要是和原本页面要相近
<div v-if="isSkeletonLoading">
<row padding="0 10px 0">
<skeleton-square
width="390px"
height="25px"
></skeleton-square>
</row>
<row slot="list" padding="15px 10px 0">
<column>
<skeleton-square
width="390px"
height="168px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
<row slot="list" padding="15px 10px 0">
<skeleton-square
width="50px"
height="50px"
>
</skeleton-square>
<column>
<skeleton-square
width="300px"
:count="2"
margin="10px 10px 5px"
></skeleton-square>
</column>
</row>
</div>
在获得文章数据之后关闭骨架屏的显示,也就是在 getArticleList 方法中调用
this.$nextTick(() => {
this.isSkeletonLoading = false
})
优化后效果: