0
点赞
收藏
分享

微信扫一扫

微信小程序skeleton骨架屏


微信小程序skeleton骨架屏_链接地址

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

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

微信小程序skeleton骨架屏_git_02

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)
},
})


举报

相关推荐

0 条评论