小程序列表滚动加载下一页数据功能实现指南

在前端小程序开发中，列表页是用户交互的核心部分之一。为了提高用户体验和页面响应速度，实现列表的滚动加载（也称为“无限滚动”或“懒加载”）功能显得尤为重要。本篇文章将详细介绍如何在小程序中实现这一功能，并提供一些优化建议。

一、功能概述

滚动加载是一种用户在浏览列表时，当滚动到页面底部自动加载更多数据的技术。这种技术可以减少初次加载的数据量，加快页面加载速度，同时按需加载数据，减轻服务器压力。

二、准备工作

1. 选择合适的开发框架：本例中使用 Vue.js 作为开发框架，因为它具有良好的组件化特性和丰富的生态。
2. UI组件库：使用 uView UI 组件库，它提供了丰富的组件和简便的使用方法。

三、滚动加载组件实现

模板部分

首先，我们需要创建一个基本的列表页面模板。以下是使用 uView UI 组件库的示例代码

<view class="order-list">
	<u-list height="100%" lowerThreshold="30" :preLoadScreen="page.current * 4" @scrolltolower="scrolltolower">
        <u-empty v-if="messageList.length == 0 && noMoreData !== 'loadmore'" text="暂无数据" mode="list" marginTop="100"></u-empty>
		<view v-for="(item, index) in messageList" :key="index">
			<view class="content-list">列表内容</view>
		</view>
		<u-loadmore :status="noMoreData" :nomore-text="nomoreText" />
		<view style="width: 100%; height: 20rpx; margin-top: 20rpx; background-color: transparent"></view>
	</u-list>
</view>

脚本部分

在 Vue 的 data 函数中初始化状态；在 onShow 生命周期钩子中初始化数据加载；通过监听 scrolltolower 事件来加载更多数据

<script>
import { getMessageList } from '@/api/message.js';

export default {
	data() {
		return {
			page: {
				current: 1,
				size: 10
			},
			noMoreData: 'loadmore',
			nomoreText: '实在没有了',
			messageList: [],        
		}
	},
	onShow() {
		this.page.current = 1
		this.getMessageData();
	},
	methods: {
		scrolltolower() {
			if (this.noMoreData !== 'loadmore') {
				return;
			}
			this.page.current++;
			this.getMessageData(true);
		},
		getMessageData(srcoll) {
			let input = {
				...this.page,
			};
			this.noMoreData = 'loading';
			// 调用接口
			getMessageList(input).then((res) => {
				if (res.code == 200) {
					const newData = res.data.records;
					// ... 拿到接口数据进行处理加载
				}
			});
		},
	}
}
</script>

样式

使用 SCSS 为列表添加样式

<style lang="scss" scoped>
    .order-list {
	    height: calc(100vh - 320rpx);
	    margin: 0 auto;
	    .content-list {
	        width: 95%;
	        margin: 0 auto;
	        height: 100rpx;
	        display: flex;
	    }
	}
</style>

完整代码示例

<view class="order-list">
	<u-list height="100%" lowerThreshold="30" :preLoadScreen="page.current * 4" @scrolltolower="scrolltolower">
               <u-empty v-if="messageList.length == 0 && noMoreData !== 'loadmore'" text="暂无数据" mode="list" marginTop="100"></u-empty>
		<view v-for="(item, index) in messageList" :key="index">
			<view class="content-list">列表内容</view>
		</view>
		<u-loadmore :status="noMoreData" :nomore-text="nomoreText" />
		<view style="width: 100%; height: 20rpx; margin-top: 20rpx; background-color: transparent"></view>
	</u-list>
</view>
 

<script>
import { getMessageList } from '@/api/message.js';

export default {
	data() {
		return {
			page: {
				current: 1,
				size: 10
			},
			noMoreData: 'loadmore',
			nomoreText: '实在没有了',
			messageList: [],        
		}
	},

	onShow() {
	    this.page.current = 1
	    this.getMessageData();
	},

	methods: {
	    scrolltolower() {
	        if (this.noMoreData !== 'loadmore') {
	            return;
	        }
	        this.page.current++;
	        this.getMessageData(true);
	    },
	    getMessageData(srcoll) {
	        let input = {
	            ...this.page,
	        };
	        this.noMoreData = 'loading';
	        getMessageList(input).then((res) => {
	            console.log(res, '消息列表返回值打印');
	            if (res.code == 200) {
	                const newData = res.data.records;
	                if (newData && newData.length > 0) {
	                    if (srcoll) {
	                        this.messageList = this.messageList.concat(newData);
	                        this.noMoreData = 'loadmore';
	                    } else {
                                                        // 这个长度值根据实际开发内容列表来定 
					       // 这个是判断页面首次加载接口列表数据就6条的时候是否到页面底部了,到底部就就不可能继续滚动了显示'nomore'
	                        if (newData.length > 6) {
	                            this.noMoreData = 'loadmore';
	                        } else {
	                            this.noMoreData = 'nomore';
	                        }
	                        this.messageList = newData;
	                    }
	                } else {
	                    this.noMoreData = 'nomore';
	                    if (srcoll) {
	                        this.page.current--;
	                    }
	                }
	            }
	        });
	    },
	}
}
</script>


<style lang="scss" scoped>
	.order-list {
	    height: calc(100vh - 320rpx);
	    margin: 0 auto;
	    .content-list {
	        width: 95%;
	        margin: 0 auto;
	        height: 100rpx;
	        display: flex;
	    }
	}
</style>

四、总结

滚动加载功能是提升小程序用户体验的重要手段之一。通过合理设计数据加载逻辑和界面提示，可以使小程序的列表页更加流畅和友好。希望本篇文章能够帮助你在小程序开发中实现这一功能，并提供一些实用的优化建议。