在前端小程序开发中，列表页是用户交互的核心部分之一。为了提高用户体验和页面响应速度，实现列表的滚动加载（也称为“无限滚动”或“懒加载”）功能显得尤为重要。本篇文章将详细介绍如何在小程序中实现这一功能，并提供一些优化建议。
一、功能概述
滚动加载是一种用户在浏览列表时，当滚动到页面底部自动加载更多数据的技术。这种技术可以减少初次加载的数据量，加快页面加载速度，同时按需加载数据，减轻服务器压力。
二、准备工作
- 选择合适的开发框架：本例中使用 Vue.js 作为开发框架，因为它具有良好的组件化特性和丰富的生态。
- 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>四、总结
滚动加载功能是提升小程序用户体验的重要手段之一。通过合理设计数据加载逻辑和界面提示，可以使小程序的列表页更加流畅和友好。希望本篇文章能够帮助你在小程序开发中实现这一功能，并提供一些实用的优化建议。
