微信小程序skeleton骨架屏

明知山

发布于 2020-09-02 16:35:07

62400

代码可运行

文章被收录于专栏：前端开发随笔前端开发随笔

运行总次数：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 = [{
      name: "xxx",
      phone: "xxxxxxxxxxxxxx",
      address: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }, {
      name: "xxx",
      phone: "xxxxxxxxxxxxxx",
      address: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }, {
      name: "xxx",
      phone: "xxxxxxxxxxxxxx",
      address: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }]
    this.setData({
      list: array
    })
    setTimeout(() => {
      this.setData({
        isSkeleton: false
      })
    }, 2000)
  },
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/08/06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

github