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
    评论
uni-app中,上拉加载更多是一种见的交互方式,用于在列表或页面中加载更多的数据。下面是一种实现上拉加载更多的方法: 1. 首先,在你的页面或组件中,需要监听页面滚动事件,以便判断用户是否已经滚动到了页面底部。 2. 当用户滚动到页面底部时,触发一个加载更多的函数。 3. 在加载更多的函数中,可以发送异步请求获取更多的数据。 4. 获取到数据后,将新数据追加到原有的数据列表中。 5. 更新页面的数据绑定,使页面能够展示新加载的数据。 下面是一个示例代码: ```html <template> <view> <!-- 列表展示数据 --> <view v-for="(item, index) in dataList" :key="index">{{ item }}</view> <!-- 加载更多提示 --> <view v-if="loading">加载中...</view> </view> </template> <script> export default { data() { return { dataList: [], // 存储数据列表 loading: false, // 是否正在加载更多 page: 1, // 当前页码 pageSize: 10, // 每页数据数量 }; }, mounted() { // 监听页面滚动事件 uni.pageScrollTo({ scrollTop: 0, duration: 0, }); uni.onPageScroll(this.handlePageScroll); }, destroyed() { // 取消监听页面滚动事件 uni.offPageScroll(this.handlePageScroll); }, methods: { handlePageScroll(e) { // 判断是否滚动到页面底部 const { scrollTop, scrollHeight, windowHeight } = e; if (scrollTop + windowHeight >= scrollHeight) { this.loadMore(); } }, loadMore() { // 正在加载中,避免重复触发 if (this.loading) return; this.loading = true; // 发送异步请求获取更多数据 uni.request({ url: 'your-api-url', data: { page: this.page, pageSize: this.pageSize, }, success: (res) => { // 获取到新数据 const newData = res.data; // 将新数据追加到原有数据列表中 this.dataList = this.dataList.concat(newData); // 更新页码 this.page++; // 加载完成,重置loading状态 this.loading = false; }, fail: (err) => { console.error(err); // 加载失败,重置loading状态 this.loading = false; }, }); }, }, }; </script> ``` 这是一个简单的示例,你可以根据自己的实际需求进行修改和扩展。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值