uniapp自定义加载更多loading动画

pages.json配置

"enablePullDownRefresh":true

详细配置：https://uniapp.dcloud.net.cn/api/ui/pulldown.html#onpulldownrefresh

template

<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in list">
				{{item}}
			</view>
			<view class="loading">{{loadingText}}</view>
		</view>
		<!--loading-->
		<view class="light-loading" v-if="LoadingModel">
			<view class="box">
				<view class="h2">Loading</view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
				<view class="span"></view>
			</view>
		</view>
		<!--loading-->
	</view>
</template>

script

var _self, page = 1, timer = null;
export default {
	data() {
		return {
			list:[1,2,3,4,5,6,7,8,9,10],
			loadingText:"",
			LoadingModel:false,
		}
	},
	onLoad() {
		_self = this;

		this.getList();
	},
	onPullDownRefresh:function(){
		this.getList();
	},
	onReachBottom:function(){
		if(timer != null){
			clearTimeout(timer);
		}
		_self.LoadingModel = true
		_self.loadingText = '加载中...';
		
		timer = setTimeout(function(){
			_self.getMore();
		}, 800);
		
	},
	methods: {
		/* more */
		getMore : function(){
			// _self.loadingText = '加载中...';
			uni.showNavigationBarLoading();
			
			setTimeout(function(){
				_self.LoadingModel = false
			},500)
			
			console.log(page)
			// uni.request({
			//     url: '',
			// 	   data:{page:page},
			//     method: 'GET',
			//     success: function(res){
			//      _self.loadingText = '';
			//      if(res.data == null){
			//       uni.hideNavigationBarLoading();
			//       _self.loadingText = '已加载全部';
			//       return false;
			//      }
					page++;
			//      console.log(res);
					var obj = [11,12,13]
					_self.list = _self.list.concat(obj);
			//      _self.loadingText = '加载更多';
			//      uni.hideNavigationBarLoading();
			//     }
			// });
			
			
		},
		/* list */
		getList : function(){
		   page = 1;
		   uni.showNavigationBarLoading();
		   
		   /*  
		   uni.request({
				url: '',
				method: 'GET',
				data:{page:page},
				success: function(res){
					
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
			*/		
					page++;
					_self.loadingText = '加载更多';
			/* 		
				},
			})
			*/
		},
		/* end */
	}
}

css

.h2{ margin:0; padding:0 ; }

@-webkit-keyframes loading {
0% {
opacity:0
}
to {
	opacity: 1
}
}
@keyframes loading {
0% {
opacity:0
}
to {
	opacity: 1
}
}
.dark-loading {
	background: #222
}
.light-loading {
	/* background: #fff; */
	background: rgb(255,255,255,0.1);
}
.dark-loading, .light-loading {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999
}
.dark-loading .box .h2, .light-loading .box .h2 {
	color: #777;
	margin: 0;
	font-size: 24upx;
	text-transform: uppercase;
	letter-spacing: 1upx;
	text-align: center
}
.dark-loading .box .span, .light-loading .box .span {
	display: inline-block;
	vertical-align: middle;
	width: 18upx;
	height: 18upx;
	margin: 5upx;
	background: #007db6;
	border-radius:50%;
	-webkit-animation: loading 1s infinite alternate;
	animation: loading 1s infinite alternate;
	
}
.dark-loading .box .span:nth-of-type(2), .light-loading .box .span:nth-of-type(2) {
	background: #008fb2;
	-webkit-animation-delay: .2s;
	animation-delay: .2s
}
.dark-loading .box .span:nth-of-type(3), .light-loading .box .span:nth-of-type(3) {
	background: #009b9e;
	-webkit-animation-delay: .4s;
	animation-delay: .4s
}
.dark-loading .box .span:nth-of-type(4), .light-loading .box .span:nth-of-type(4) {
	background: #00a77d;
	-webkit-animation-delay: .6s;
	animation-delay: .6s
}
.dark-loading .box .span:nth-of-type(5), .light-loading .box .span:nth-of-type(5) {
	background: #00b247;
	-webkit-animation-delay: .8s;
	animation-delay: .8s
}
.dark-loading .box .span:nth-of-type(6), .light-loading .box .span:nth-of-type(6) {
	background: #5ab027;
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}
.dark-loading .box .span:nth-of-type(7), .light-loading .box .span:nth-of-type(7) {
	background: #a0b61e;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s
}


/* base */
page{ background: #fff; }
.container{ padding: 40upx 40upx; }
.list{}
.list .item{ background: #fff; border-bottom: 1upx solid #eee; color: #999; padding: 50upx 0; text-align: left; }

.loading{ font-size: 28upx; color: #666; text-align: center; padding: 40upx 0 50upx 0; }