页面骨架图加载
发布于 4 年前 作者 azhang 3099 次浏览 来自 分享

什么是骨架图加载?

看图

具体实现

1. 引入vant-weapp有赞小程序UI框架提供的van-skeleton组件

2. 代码

// 请求接口时设置indexGetIng为true,就会显示这个block,就达到了在请求数据的时候显示列表骨架图
        <block wx:if="{{indexGetIng||indexList.length}}">
            <view class="list">
                <list-item type="index" list="{{indexGetIng?5:indexList}}"></list-item>
            </view>
            <load-more hasMore="{{indexHasMore}}"></load-more>
        </block>
	// 接口请求完毕了,设置indexGetIng为false,indexList.length=0,就显示这个block,提示无内容
        <block wx:else>
            <null-page>
                <view class="null-tip">暂无相关内容哦~</view>
            </null-page>
        </block>

上面代码运行如下:

1)、加载中显示骨架图:

2)、加载完,如果请求到数据了:

3)、加载完,如果没有请求到数据:

3. 接下来说说list-item子组件中是如何显示骨架图的:

从上面的代码看出,在请求数据的时候给子组件的list-item传了个5,这个5就是在子组件需要渲染的骨架图列表数量

	// 通过判断父组件传过来的list是不是数组,来判断是否要显示列表数据
<block wx:if="{{util.isArray(list)}}">
        <view>列表数据展示</view>
</block>
	// 如果父组件传过来的不是数组,而是5,即父组件在请求列表数据,这里就循环显示5个骨架图列表,具体属性参照van-skeleton文档
<block wx:else>
  <!--这里的list 为渲染的骨架图数量-->
  <view class="item" wx:for="{{list}}">
    <van-skeleton
            title
            avatar
            avatar-size="85px"
            avatar-shape="square"
            row="3"
            row-width="{{['100%','100%','80%']}}"
            row-height="{{['100px','16px','16px']}}"
            loading="{{true}}"
    >
    </van-skeleton>
  </view>
</block>

通过查阅van-skeleton文档,发现并没有 row-height属性,这是我自己改的van-skeleton组件的源码,(因为这个组件只能设置骨架灰图的宽,不能设置高,默认高度为16px),具体改动如下:

// skeleton.js
props: {
    
        rowWidth: {
            type: null,
            value: '100%',
            observer(val) {
                this.setData({ isArray: val instanceof Array });
            }
        },
        /*TODO 新增*/
        rowHeight: {
            type: null,
            value: '16px',
            observer(val) {
                this.setData({ isArrayHeight: val instanceof Array });
            }
        },
    },
    
    // skeleton.wxml
    // 在这个view中的style属性中增加 height:' + (isArrayHeight ? rowHeight[index] : rowHeight)
    <view
      wx:for="row"
      wx:key="index"
      wx:for-index="index"
      class="{{ utils.bem('skeleton__row') }}"
      style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) + ';height:' + (isArrayHeight ? rowHeight[index] : rowHeight) }}"
    />

这样就可以设置骨架灰图的高度了,效果如下

第一次写技术分享文章,这是小白我在工作中遇到的问题的解决方案,抛砖引玉,麻烦大佬们多多提建议!

回到顶部