<template> <view> <view class="container skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}"> <view style="margin: 20px 0"> <view v-for="(item,index) in lists" :key="index" class="lists"> <text class="skeleton-rect">{{item}}</text> </view> </view> <view style="margin: 20px 0"> <view v-for="(item,index) in lists" :key="index" class="lists"> <!-- <text class="skeleton-radius">{{item}}</text> --> <view class="conts"> <image mode="widthFix" class="skeleton-radius" src="../../static/logo.png"></image> <view class="conts-rig skeleton-rect"> <view class="conts-title">放松分是否是房东舒服但放松放松</view> <view class="conts-lab">2020-12-12 12:12:31</view> </view> </view> </view> </view> <!-- <view class="usermotto"> <text class="user-motto skeleton-rect">{{motto}}</text> </view> --> </view> <skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton> </view> </template> <script> import skeleton from '../../components/quick-skeleton.vue'; let app = getApp(); export default { components: { skeleton }, data() { return { lists: [], //如果没有默认数据 showSkeleton: true, //骨架屏显示隐藏 isNodes: 0 //控制什么时候开始抓取元素节点,只要数值改变就重新抓取 } }, onLoad() { const that = this; //问题:骨架屏出现的时间段,部分已经渲染完毕,但还是得等骨架屏隐藏才一起出现 setTimeout(() => { this.lists = [ '第1行数据', '第2行数据', '第3行数据', '第4行数据', '第5行数据', '第6行数据' ] that.isNodes++; }, 180); setTimeout(() => { that.showSkeleton = false; }, 2000); }, methods: { } } </script> <style lang="scss"> .container { width: 94%; margin-left: 3%; } .usermotto { margin-top: 200px; } .lists { margin: 10px 0; } .list { margin-right: 10px; } .conts { width: 94%; margin-top: 20rpx; margin-left: 3%; height: 140rpx; display: flex; image{ width: 140rpx; height: 140rpx; border-radius: 50%; } .conts-rig{ margin-left: 20rpx; height: 140rpx; width: 70%; } .conts-title{ height: 44px; font-size: 15px; color: #333333; padding-top: 6rpx; } .conts-lab{ font-size: 14px; color: #666666; } } </style>