什么是骨架图加载？

看图

具体实现

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) }}"
    />

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

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