首先在项目中跟pages同级创建一个components文件夹，在文件夹中新建一个refrtch.vue文件，将官方代码复制进去
refrtch.vue 完整文件如下：
<template>
<view class="uni-load-more">
<view v-show="status === 'loading' && showIcon" class="uni-load-more__img">
<view class="load1">
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
</view>
<view class="load2">
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
</view>
<view class="load3">
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
<view :style="{background:color}" />
</view>
</view>
<text :style="{color:color}" class="uni-load-more__text">{
{
status === 'more' ? contentText.contentdown : (status === 'loading' ? contentText.contentrefresh : contentText.contentnomore) }}</text>
</view>
</template>
<script>
export default {
name: 'UniLoadMore',
props: {
status: {
// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
type: String,
default: 'more'
},
showIcon: {
type: Boolean,
default: true
},
color: {
type: String,
default: '#777777'
},
contentText: {
type: Object,
default () {
return {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
}
}
}
},
data() {
return {
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center
}
.uni-load-more__text {
font-size: 28upx;
color: #999
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px
}
.uni-load-more__img>view {
position: absolute
}
.uni-load-more__img>view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: .2;
transform-origin: 50%;
animation: load 1.56s ease infinite
}
.uni-load-more__img>view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px
}
.uni-load-more__img>view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0
}
.uni-load-more__img>view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px
}
.uni-load-more__img>view view:nth-child(4) {
top: 11px;
left: 0
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px
}
.load2 {
transform: rotate(30deg)
}
.load3 {
transform: rotate(60deg)
}
.load1 view:nth-child(1) {
animation-delay: 0s
}
.load2 view:nth-child(1) {
animation-delay: .13s
}
.load3 view:nth-child(1) {
animation-delay: .26s
}
.load1 view:nth-child(2) {
animation-delay: .39s
}
.load2 view:nth-child(2) {
animation-delay: .52s
}
.load3 view:nth-child(2) {
animation-delay: .65s
}
.load1 view:nth-child(3) {
animation-delay: .78s
}
.load2 view:nth-child(3) {
animation-delay: .91s
}
.load3 view:nth-child(3) {
animation-delay: 1.04s
}
.load1 view:nth-child(4) {
animation-delay: 1.17s
}
.load2 view:nth-child(4) {
animation-delay: 1.3s
}
.load3 view:nth-child(4) {
animation-delay: 1.43s
}
@-webkit-keyframes load {
0% {
opacity: 1
}
100% {
opacity: .2
}
}
</style>
在页面中直接使用
内涵注释
完整的使用例子如下：
<template>
<view>
<view>
<block v-for="(item , index) in list_array" :key="index">
<view>{
{
item }}</view>
</block>
</view>
<view>
<uni-load-more :status="status" :content-text="contentText" color="#007aff" />
</view>
</view>
</template>
<script>
import uniLoadMore from '../../components/refetch.vue'
export default {
data() {
return {
//初始数据
list_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
'19',
'20','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'
],
//加载状态
status: 'more',
//加载状态的不同类型
statusTypes: [{
value: 'more',
text: '加载前'
}, {
value: 'loading',
text: '加载中'
}, {
value: 'noMore',
text: '没有更多'
}],
//触底加载更多的提示文字
contentText: {
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
}
}
},
//注册组件
components: {
uniLoadMore
},
onLoad: function(options) {
setTimeout(function() {
console.log('start pulldown');
}, 1000);
//开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
uni.startPullDownRefresh();
},
// 下拉刷新
onPullDownRefresh() {
let _this = this
console.log('下拉刷新后只保留默认显示的几条数据');
setTimeout(function() {
//当处理完成刷新数据后，uni.stopPullDownRefresh可以停止当前页面的刷新效果
_this.list_array=['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18',
'19',
'20','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'
],
uni.stopPullDownRefresh();
}, 1000);
},
// 上拉加载
onReachBottom() {
let _this = this
this.status = 'loading'
//在当前页面显示导航条加载动画。
uni.showNavigationBarLoading()
console.log('加载更多');
setTimeout(function() {
for (var i = 0; i < 10; i++) {
_this.list_array.push("000" + i)
}
_this.status = 'more'
//在当前页面隐藏导航条加载动画。
uni.hideNavigationBarLoading()
}, 2000);
},
methods: {
}
}
</script>
<style>
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff
}
view {
font-size: 28upx;
line-height: inherit
}
.example {
padding: 0 30upx 30upx
}
.example-title {
font-size: 32upx;
line-height: 32upx;
color: #777;
margin: 40upx 25upx;
position: relative
}
.example .example-title {
margin: 40upx 0
}
.example-body {
padding: 0 40upx
}
uni-radio-group uni-label {
padding: 0;
}
.uni-list-item__container {
padding: 24upx 30upx;
width: 100%;
box-sizing: border-box;
flex: 1;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-list-item__container:after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 30upx;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
</style>