Ubuntu
113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<template>
|
|
<view class="uni-load-more" @click="onClick">
|
|
<view class="uni-load-more__content" :class="{'uni-load-more--loading': status === 'loading'}">
|
|
<!-- 加载中 -->
|
|
<view v-if="status === 'loading'" class="uni-load-more__loading">
|
|
<view class="uni-load-more__loading-icon"></view>
|
|
<text class="uni-load-more__loading-text">{{ contentText.contentrefresh }}</text>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view v-else-if="status === 'more'" class="uni-load-more__more">
|
|
<text class="uni-load-more__more-text">{{ contentText.contentdown }}</text>
|
|
</view>
|
|
|
|
<!-- 没有更多 -->
|
|
<view v-else-if="status === 'noMore'" class="uni-load-more__nomore">
|
|
<text class="uni-load-more__nomore-text">{{ contentText.contentnomore }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'UniLoadMore',
|
|
props: {
|
|
// 状态：more, loading, noMore
|
|
status: {
|
|
type: String,
|
|
default: 'more'
|
|
},
|
|
// 文本内容
|
|
contentText: {
|
|
type: Object,
|
|
default: () => ({
|
|
contentdown: '上拉显示更多',
|
|
contentrefresh: '正在加载...',
|
|
contentnomore: '没有更多数据了'
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
if (this.status === 'more') {
|
|
this.$emit('clickLoadMore')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.uni-load-more {
|
|
padding: 40rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-load-more__content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 加载中样式 */
|
|
.uni-load-more__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-load-more__loading-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border: 4rpx solid #f3f3f3;
|
|
border-top: 4rpx solid #3cc51f;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.uni-load-more__loading-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 加载更多样式 */
|
|
.uni-load-more__more {
|
|
padding: 20rpx 40rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.uni-load-more__more-text {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
/* 没有更多样式 */
|
|
.uni-load-more__nomore {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.uni-load-more__nomore-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
</style> |