uni-app上拉加载2.0

╰半橙微兮° 2021-07-25 12:33 177阅读 0赞

<view class="loading" v-show="loadings">
    			<view class="loading-san">
    				<u-loading size="40" :show="loadings" color="#FA2E1A"></u-loading>
    				<view class="logintext">一大波数据正在赶来~~</view>
    			</view>
    		</view>
    		
    		<view class="nodata" v-show="nodata">
    			没有更多数据
    		</view>
    		<view class="loading-box">
    			<u-loading :show="loadingone" color="#FA2E1A" size="70"></u-loading>
    		</view>

dataBox: [], //新闻列表数据盒子
    				send: false, //点击状态
    				page: 1, //当前页数
    				limit: 7, //每次请求的条数
    				last_page: '', //总页数
    				loadingone: true, //首次进入页面获取数据加载动画 
    				is_pull: false, //是否在上拉加载 默认false 
    				loadings: false, //加载动画
    				nodata: false, //没有更多数据

//加载动画 .loading { 
    			width: 100%;
    			height: 100upx;
    			display: flex;
    			justify-content: space-around;
    			align-items: center;
    			// background-color: #F6F7F9; .loading-san { 
    				display: flex;
    				justify-content: space-around;
    				align-items: center; .logintext { 
    					margin-left: 16upx;
    					font-size: 28upx;
    					font-family: PingFang;
    					color: #999999;
    				}
    			}
    		}
    		
    		//没有更多数据 .nodata { 
    			width: 100%;
    			height: 100upx;
    			// background-color: #F6F7F9;
    			text-align: center;
    			line-height: 100upx;
    			color: #999999;
    			font-size: 24upx;
    			font-family: PingFang SC;
    			font-weight: 400;
    		}
    		
    		.loading-box { 
    			position: fixed;
    			top: 600upx;
    			left: 340upx;
    			z-index: 1000;
    		}

//获取新闻列表
    			getNewsList() { 
    				this.$api.post(global.apiUrls.newslist, { 
    						page: this.page, //当前页数
    						limit: this.limit, //加载条数
    						is_recommend: this.is_recommend, //0 不推荐 1 推荐顶部 2 推荐底部 3 综合推荐
    						classify_id: this.classify_id, //分类id 
    					})
    					.then(res => { 
    						console.log(res.data)
    						if (res.data.code == 1) { 
    							this.dataBox = [...this.dataBox, ...res.data.data.data]; //数据赋值
    							this.last_page = res.data.data.last_page; //总页数赋值
    							this.loadingone = false; //首次进入页面加载动画结束
    							this.is_pull = false; //上拉加载动作结束
    							this.loadings = false; //上拉加载动画结束
    							if (this.page > this.last_page) { 
    								this.nodata = true;
    							}
    						} else { 
    							this.loadingone = false;
    							this.is_pull = false; //上拉加载动作结束
    							this.loadings = false; //上拉加载动画结束
    							this.$message.info(res.data.msg); //获取数据失败弹框
    						}
    					}).catch(err => { 
    						console.log(res)
    						this.loadingone = false;
    						this.is_pull = false; //上拉加载动作结束
    					})
    			},

//上拉加载
    		onReachBottom() { 
    			//判断总页数是否大于1
    			if (this.last_page > 1) { 
    				//判断当前是否处于上拉加载中
    				if (this.is_pull == false) { 
    					//判断当前页是否小于总页数
    					if (this.page < this.last_page) { 
    						this.is_pull = true; //激活上拉状态
    						this.loadings = true;
    						this.page++; //当前页数加1
    						this.getNewsList(); //获取新闻列表
    					}
    				}
    			}
    		},

//跳转到详情界面
    			goNewDetail(id) { 
    				if (this.send == false) { 
    					this.send = true;
    					this.$urouter.navigateTo({ 
    						url: '/pages/home/new_details',
    						params: { 
    							aid: id
    						}
    					});
    					setTimeout(() => { 
    						this.send = false;
    					}, 1000);
    			
    				}
    			},