![在這裏插入圖片描述]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
background: #f0f0f0;
width: 100vw;
min-height: 100vh;
overflow-x: hidden;
overflow-y: auto;
color: #888;
font-size: 14px;
}
.skeletons {
position: relative;
display: block;
overflow: hidden;
height: 100%;
min-height: 20px;
background-color: #ededed;
}
.skeletons:empty::after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.753), transparent);
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}
@-webkit-keyframes loading {
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes loading {
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.items{
padding: 10px;
}
.item{
background:#fff;
margin-bottom: 2px;
padding: 4px;
display: flex;
line-height: 1.3em;
}
.item-right{
width: 90%;
}
.item-img{
width: 40px;
height: 40px;
margin-right: 8px;
}
.item-img img{
width: 100%;
height: 100%;
}
.item-title,
.item-content{
height: 18px;
margin-bottom: 4px;
}
.item-title{
width: 20%;
}
.item-content{
width: 80%;
}
</style>
</head>
<body>
<div id="app">
<div class="items">
<div class="item" v-for="(item,index) in items" :key="'test'+index">
<div :class="showSkeletons?'skeletons':''" class="item-img ">
<img v-show="item.url" :src="item.url" alt="">
</div>
<div class="item-right">
<div :class="showSkeletons?'skeletons':''" class="item-title ">{{item.title}}</div>
<div :class="showSkeletons?'skeletons':''" class="item-content ">{{item.content}}</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:'#app',
data(){
return{
showSkeletons:true,
items:[]
}
},
created(){
this.items = [{},{},{},{},{}]
setTimeout(()=>{
this.items = [
{title:'武漢',content:'關於會議',url:'./img/2.png'},
{title:'上海',content:'機場信息',url:'./img/2.png'},
{title:'上海',content:'機場信息',url:'./img/2.png'},
{title:'上海',content:'機場信息',url:'./img/2.png'},
{title:'上海',content:'機場信息',url:'./img/2.png'}
]
this.showSkeletons = false;
},2000)
},
methods:{
}
})
</script>
</body>
</html>
