评论

页面骨架图加载

小程序页面骨架图加载

什么是骨架图加载?

看图

具体实现

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

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

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

最后一次编辑于  2020-01-07  
点赞 1
收藏
评论

2 个评论

  • 晨曦の🍉
    晨曦の🍉
    2020-04-02

    同样也是刚接触到vant的骨架屏,想问一下怎么将数据加载到对应的灰图中,初学小程序不太懂,希望楼主能解答一下

    2020-04-02
    赞同
    回复 5
    • Youngwell
      Youngwell
      2020-04-02
      看这段:“3. 接下来说说list-item子组件中是如何显示骨架图的”下面的代码,如果没有数据就显示wx:else(即骨架图),有数据了就显示上面的wx:if
      2020-04-02
      回复
    • 晨曦の🍉
      晨曦の🍉
      2020-04-02回复Youngwell
      那么就是说我要把用户的头像和名称放进图片对应的地方的话就得自己再写一个view覆盖,或者用微信自带的SelectorQuery.selectAll操作标签填入数据?
      2020-04-02
      回复
    • Youngwell
      Youngwell
      2020-04-02
      我用的是第一种,你说的第二种是楼下那位大神方案
      2020-04-02
      回复
    • 晨曦の🍉
      晨曦の🍉
      2020-04-02回复Youngwell
      哦哦,那样就要再重写样式了,谢谢楼主
      2020-04-02
      回复
    • Youngwell
      Youngwell
      2020-04-02回复晨曦の🍉
      不客气
      2020-04-02
      回复
  • 盐王爷
    盐王爷
    2020-01-08

    那我也 打个广告:

    https://developers.weixin.qq.com/community/develop/article/doc/000a42c2cd054004983935f675b813

    2020-01-08
    赞同
    回复 2
    • Youngwell
      Youngwell
      2020-01-08
      大佬,我做的小程序,首页用的就是你这个,非常棒,感谢大佬
      2020-01-08
      回复
    • 盐王爷
      盐王爷
      2020-01-08回复Youngwell
      其实只要懂原理后 就超级简单啦。更幸运的是官方提供了api。我这个你也可以改为data里写死默认数据。
      2020-01-08
      回复
登录 后发表内容