微信小程序skeleton骨架屏

最新推荐文章于 2024-07-05 21:00:00 发布

明知山_

最新推荐文章于 2024-07-05 21:00:00 发布

阅读量1k

点赞数

分类专栏： Weapp

本文链接：https://blog.csdn.net/AK852369/article/details/107835825

版权

Weapp 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在这里插入图片描述

github链接地址

https://github.com/jayZOU/skeleton.git

克隆dist文件放入到项目component目录中

在这里插入图片描述

page页面引入

{
  "usingComponents": {
    "skeleton": "../../component/skeleton/skeleton"
  },
}

文本添加class=“skeleton-rect”,
图片添加class=“skeleton-radius”

<skeleton wx:if="{{isSkeleton}}" loading="chiaroscuro"></skeleton>
<view class="box skeleton">
    <view class="row" wx:for="{{list}}" wx:key="index">
        <view class="name">
            <view class="skeleton-rect">{{item.name}}</view>
            <view class="skeleton-rect">置顶</view>
        </view>
        <view class="col">
            <view class="skeleton-rect">{{item.phone}}</view>
            <view class="skeleton-rect">{{item.address}}</view>
        </view>
        <view class="upload flexCenter">
            <image class="skeleton-radius" src="https://sucai.suoluomei.cn/sucai_zs/images/20200804180525-63.png"
                mode="widthFix"></image>
        </view>
    </view>
</view>

Page({
  data: {
    isSkeleton: true,
    list: []
  },
  
  onLoad: function (options) {
   var array = []
      for (let i = 0; i < 10; i++) {
          array.push({
              name: "xxx",
              phone: "xxxxxxxxxxxxxx",
              address: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
          })
      }
      this.setData({
          list: array
      })
    setTimeout(() => {
      this.setData({
        isSkeleton: false
      })
    }, 2000)
  },
})