uni-app上拉加载2.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);
			
				}
			},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值