一、选取适当的加载标志
实现上拉加载更多首先要选择合适的标志来指示用户，一个好的标志可以增加用户的体验。常见的标志方式包括：文字提示、loading图标、骨架屏等，而且这些方式可以组合使用，比如同时使用loading图标和文字提示。
代码示例：
// wxml
加载更多
加载中
没有更多了
// wxss
.load-more {
display: block;
margin-top: 20rpx;
text-align: center;
}
.loading-box {
display: flex;
justify-content: center;
flex-direction: row;
}
.loading-text {
font-size: 34rpx;
color: #999;
margin-right: 10rpx;
}
.loading-img {
animation: rotation 1.5s linear infinite;
height: 36rpx;
width: 36rpx;
}
.no-more__text {
font-size: 34rpx;
margin-top: 40rpx;
color: #999;
}
二、使用scroll-view组件
scroll-view是小程序自带的可滚动视图容器组件，可以让我们实现上下左右滑动的效果。使用scroll-view组件时，需要注意的是设置scrollView的高度和触发 scrolltolower 事件的阈值。因为scroll-view默认高度为200px，因此我们可能需要手动设置高度。
代码示例：
// wxml
// wxss
.scroll-view {
height: 100%;
}
三、优化列表渲染
当加载更多时，需要新增数据进行渲染，这将导致重新渲染整个列表，而且当数据量庞大时会导致卡顿。解决这个问题的最常见方法是分批次加载数据，比如一次只加载10条，当用户拉到底部时再继续加载10条数据。此外，可以使用小程序官方提供的wx:key属性，让列表渲染时有一个唯一的标识，这样可以避免出现重复渲染的情况。
代码示例：
// wxml
// js
Page({
data: {
list: [], // 列表数据
pageNum: 1, // 当前请求的页码
limit: 10, // 每页请求的条数
isLoading: false, // 是否正在加载
isEnd: false // 是否没有更多数据了
},
onReachBottom: function() {
// 已经全部加载完毕
if (this.data.isEnd) return
// 正在加载中
if (this.data.isLoading) return
// 开始加载
this.setData({
isLoading: true
})
this.loadData()
},
loadData(pageNum) {
// 发起请求
wx.request({
url: 'xxxxxxx',
data: {
pageNum,
limit: this.data.limit
},
success: (res) => {
const {data} = res.data;
let list = [];
if(this.pageNum == 1) {
list = data;
} else {
list = this.data.list.concat(data);
}
this.setData({
list,
pageNum: pageNum +1,
isLoading: false,
isEnd: data.length {
wx.showToast({
title: '数据获取失败',
icon: 'none',
duration: 1500
});
}
});
}
})
四、注意事项
上拉加载更多要注意以下几点：
1、保持UI友好：当没有更多数据时应该给出明确的提示，这样用户不会一直拉动列表却发现没有新数据。
2、避免滥用loading：一个好的用户体验应该是迅速地获得想要的内容，而不是一直等待loading。
3、节流与防抖：在触发scrolltolower事件的时候，可能会出现用户希望连续加载的情况，此时可以通过节流或防抖的方式来延迟函数的触发。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300940.html
微信扫一扫 
支付宝扫一扫 