You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.0 KiB
60 lines
1.0 KiB
2 months ago
|
<template>
|
||
|
|
<!-- 上拉加载 -->
|
||
|
|
<view>
|
||
|
|
<view class="Loads acea-row row-center-wrapper" v-if="loading && !loaded" style="margin-top: .2rem;">
|
||
|
|
<view v-if="loading">
|
||
|
|
<view class="iconfont icon-jiazai loading acea-row row-center-wrapper"></view>
|
||
|
|
<slot name="loading"></slot>
|
||
|
|
正在加载中
|
||
|
|
</view>
|
||
|
|
<view v-else>
|
||
|
|
<slot name="load"></slot>
|
||
|
|
上拉加载更多
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "Loading",
|
||
|
|
props: {
|
||
|
|
loaded: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.Loads {
|
||
|
|
height: 80upx;
|
||
|
|
font-size: 25upx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.Loads .iconfont {
|
||
|
|
font-size: 30upx;
|
||
|
|
margin-right: 10upx;
|
||
|
|
height: 32upx;
|
||
|
|
line-height: 32upx;
|
||
|
|
}
|
||
|
|
/*加载动画*/
|
||
|
|
@keyframes load {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.loadingpic {
|
||
|
|
animation: load 3s linear 1s infinite;
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
animation: load linear 1s infinite;
|
||
|
|
}
|
||
|
|
</style>
|