uni-app和微信小程序提供了下拉刷新的加载loading,但是上拉刷新没有提供loading加载动画
现在我们就自己写一个上拉加载更多的时候加载loading动画
loading-css3.gif
上代码:
<template> <view class=""> <u-button type="success" @click="btn">成功按钮</u-button>
//假设这中间有很多内容,自己脑补
<u-button type="success" @click="btn">成功按钮</u-button>
//自己写的loading加载 <view class="empty"> <text v-if="!open" class="meiy-empty">没有更多数据了~</text> <div v-else class="loading spin"></div> </view> </view> </template>
data() {
return {
open:false
}
},
methods: {
onPullDownRefresh(){
console.log('下拉刷新','-----')
},
onReachBottom(){
//上拉加载更多
this.open = true
// setTimeout(()=>{
// uni.stopPullDownRefresh();
// this.open = false
// },2000)
},
}
<style lang="scss">
.spin {
-webkit-transform: rotate(360deg);
-webkit-animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.spin {
transform: rotate(360deg);
animation: spin 2s linear infinite;
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* 所有浏览器实现实现 */
.loading {
32px; height: 32px;
background: url(../../static/images/home-img/loading-css3.gif);
}
/* IE10+以及其他 */
.loading::after {
content: '';
3px; height:3px;
margin: 14.5px 0 0 14.5px;
border-radius: 100%; /* 圆角 */
position: absolute;
}
.empty{
display: flex;
justify-content: center;
.meiy-empty{
font-size:22rpx;
color: #C0C0C0;
text-align: center;
margin: 20rpx;
}
}
</style>