博客

今天偶然在群里看到有人在问：

类似商品列表如何上滑到底部时自动加载下一页

以前在pc端或者古早的移动端，大家还是比较喜欢用分页

一是网速比较慢，二是流量比较贵，

直接刷刷刷的，体验不是很好

但现在大家习惯了抖快的那种爽快感后，上滑继续加载，已经是很常见的设计

废话不多说，来看看具体怎么实现

首先我们需要vfor一个list

<view v-for="(item,index) in list" :key="index"></view>

当然，这个list，我们需要先给它初始化一下

同时我们也把页面序号和分页数量一起初始化

data() {
		return {
			list：[],
			currentPage: 1,
			pageSize: 10,
			hasMore: true,
		}
	}

页面的生命周期中，有一个onReachBottom

我们实际上就是利用它来完成加载

onReachBottom() {
	// 首先要判断是否还要继续加载
	if(!hasMore){
		return
	}
	// 开始发起请求
	uni.request({
    url: 'xxxxx', //仅为示例，并非真实接口地址。
    data: {
        currentPage: this.currentPage,
        pageSize: this.pageSize
    },
    success: (res) => {
       // 得到数据后，先判断是否hasMore
       if(res.list.length < 10){
       		this.hasMore = false;
       		// 这里其实有个bug，当数据正好是10的时候，会多一次请求
       		// 如果你后端可以同时从传一个hasMore过来判断是最好的
       }
       // 然后把接收到的数据拼到list上
       this.list = this.list.concat(res.list);
    }
});
}

对应后端的处理，如果是thinkphp，可以参考：

这个接口你onLoad的时候也能用，currentPage不传就行。

$currentPage = input('currentPage') ? input('currentPage') : 1; // 不传默认1
$pageSize= input('pageSize') ? input('pageSize') : 10; // 不传默认10
$start = ($currentPage - 1) * $pageSize;
$limit = $pageSize;
$list = Db::name('xxxx')->limit($start,$limit)->select;
// 最后自己处理一下传回前端即可

这样，基本上就完成了上滑加载，

当然还有一些细节需要注意：

比如当前页面如果有多个tab，分别对应不同的分类id，那你同时也要传对应的分类id到后端，

并且你切换tab的时候，this.currentPage的值应该要先初始化为1，否则取的数据就不对了。

好了，忙里偷闲分享一下，

最近在疯狂搞uniCloud云开发，有兴趣的可以交流。