vue-pro/yudao-vue-ui/components/mix-load-more/mix-load-more.vue

60 lines
1.2 KiB
Vue
Raw Normal View History

2021-11-24 23:33:06 +08:00
<template>
<view>
<view v-show="status !== 2" class="mix-load-more center">
<image class="loading-icon" src="/static/loading/hamster.gif"></image>
<text class="text">{{ textList[status] }}</text>
</view>
<view v-show="status === 2" class="mix-load-more center">
<image class="logo" src="/static/logo-b-w.png"></image>
<text class="text">国云网络提供技术支持</text>
</view>
</view>
</template>
<script>
/**
* 上划加载更多
* @prop {Number} status 0加载前1加载中2没有更多
* @prop {Array} textList ['加载前提示', '加载中提示', '加载完提示']
*/
export default {
name: "mix-load-more",
props: {
status: {
type: Number,
default: 0
},
textList: {
type: Array,
default () {
return [
'上拉显示更多',
'正在加载 ..',
'我也是有底线的~'
];
}
}
}
}
</script>
<style scoped lang="scss">
.mix-load-more{
width: 750rpx;
height: 110rpx;
}
.loading-icon{
width: 64rpx;
height: 68rpx;
margin-right: 20rpx;
}
.text{
font-size: 26rpx;
color: #999;
}
.logo{
width: 34rpx;
height: 34rpx;
margin-right: 12rpx;
}
</style>