uni-app 加载更多

一、这种方法是先获取到了全部数据,再通过前端去处理(有点儿笨,哈哈~~~) 

<view class="carlis">
	<view class="carli" v-for="(item,index) in deslist" :key="index">
		<text class="carli_l">{{item.brandname}}</text>
		<text class="carli_r">{{item.cars_model}}</text>
    </view>
</view>
<view class="loading" @click="loading" style="height: 80upx;line-height: 80upx;margin-bottom: 16upx;text-align: center;">
	点击加载更多...
</view>
export default {
		data() {
			return {
			 	deslist: '', //数据
				counter: 0, //每点一次加载更多+1
				pageStart: 0,
				pageSize: 5 //第一次显示5条,每加载一次原来基础上多五条
			}
		},
		onLoad() {
			this.getmsglist();//第一次加载数据
		},
		methods: {
			//加载更多
			loading: function() { 
				this.counter++;
				this.pageStart = this.counter * this.pageSize;
				this.getmsglist();
			},
			//获取列表信息
			getmsglist: function() {
				var _self = this;
				_self.goodsid = uni.getStorageSync('goodsid');
				uni.request({
					url: _self._apiurl + "/app/goods/getgoodsdetail",
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						openid: _self.openid,
						token: _self.token,
						goods_id: _self.goodsid
					},
					success: (res) => {
						console.log(res);
						_self.deslist = res.data;
                        var initdata =_self.deslist;
            
						var sum = _self.deslist.length;
                        if(sum>5){
							_self.deslistshow=true;
						}else{
							_self.deslistshow=false;
						}
						if (sum - _self.pageStart < _self.pageSize) {
							_self.pageSize = sum - _self.pageStart;
						}
						var newsum = _self.pageStart + _self.pageSize;
						_self.deslist = _self.deslist.slice(0, newsum);
                        if(_self.deslist.length==initdata.length){
							_self.deslistshow=false;
						}

					}
				})
			},
		}
	}

二、每滑动一次 ,就请求一次接口,返回数据

https://ext.dcloud.net.cn/plugin?id=632   插件链接

我是直接把自己需要列表循环好的页面全部写完了过后,在后面增加了这个插件 :

<template>
	<view>
		<view class="content">
			<view class="contentlist" v-for="(item,index) in releaselist" :key="index">
				<!--需要循环的内容-->
			</view>
		</view>

        <!--使用插件-->  
		<ws-load-more ref="loadMore" @provider="provider" :pageSize="12"></ws-load-more>
	</view>
</template>

<script>
	import wsLoadMore from "../../components/wsure-load-more/load-more.vue";
	export default {
		components: {
			wsLoadMore  
		},
		data() {
			return {
				releaselist: '',//数据
				page: 1,	//	页
				sum: 10     //一次10条
			}
		},
		onLoad() {
			this.getreleasemsg(function() {});
		},
		methods: {
			//下拉刷新
			provider(e) {
				var that = this;
				that.getreleasemsg(function() {
					var releaselist = that.releaselist;
					
					//向插件传入当前页数据
					that.$refs.loadMore.pushData(releaselist);
				})
			},
			//获取初始化列表
			getreleasemsg: function(FUN) {
				var _self = this;
				uni.request({
					url: _self._apiurl + "/app/goods/getmygoods",
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						page: _self.page,
						sum: _self.sum
					},
					success: (res) => {
						console.log(res);
						_self._isplogin(res, function() {
							_self.releaselist = res.data.data;
							_self.page = _self.page + 1;
							FUN();
						})

					}
				});
			},
		}
	}
</script>

 

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值