66 lines
3.0 KiB
Vue
66 lines
3.0 KiB
Vue
<template>
|
||
<view class="load-more" v-if="status === 1">
|
||
<image
|
||
class="load-icon"
|
||
src="data:image/png;base64,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"
|
||
v-show="status === 1"
|
||
>
|
||
</image>
|
||
<text class="load-text">{{text[status]}}</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "load-more",
|
||
props: {
|
||
status: {
|
||
//0加载前，1加载中，2没有更多了
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
text: {
|
||
type: Array,
|
||
default () {
|
||
return [
|
||
'上拉显示更多',
|
||
'加载中…',
|
||
'没有更多数据了'
|
||
];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.load-more{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 90rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
.load-icon{
|
||
display: block;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 12rpx;
|
||
animation: load 1.2s cubic-bezier(.37,1.08,.7,.74) infinite;
|
||
}
|
||
.load-text{
|
||
font-size: 28rpx;
|
||
color: #8CC7B5;
|
||
}
|
||
|
||
@-webkit-keyframes load {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style> |