使用scroll-view组件很多时候会有重复数据发生,到底怎么回事儿呢？下面我们做一些可能存在问题的分析
<block wx:if="{{(noticeList.length > 0 || noticeList.length == 0) && showFlag}}">
<block wx:if="{{noticeList.length > 0}}">
<scroll-view scroll-y="true" bindscrolltolower="lower" lower-threshold="100" style="height: 96vh;margin-top: 1vh;">
<view wx:for="{{noticeList}}" wx:key="pkid">
</view>
</scroll-view>
</block>
<block wx:if="{{noticeList.length == 0}}">
<view style="height:67vh">
<view style="background: url( 'https://huhhotbubble.com/imgSource/data01.png');background-size:100%; height:14vh;width:28vw;margin-top:30vh;margin-left:auto;margin-right:auto"></view>
</view>
</block>
</block>
<block wx:else>
<view style="height:67vh">
<loading>
加载中...
</loading>
</view>
</block>
我用分页的方式查询后台数据
data: {
current: 1, // 初始化当前是第一页
size: 8, // 初始化每页显示8条数
total: 0, // 初始化总条数
noticeList: [], // 初始化List
pullFlag: false, // 下拉时是否加载数据
showFlag: false // 页面显示标记
},
请求后台数据（一般我们在onLoad或者onShow中加载）
getNoticeListByCond: function () {
// debugger
let _this = this;
let {current,size} = _this.data;
var userInfo = wx.getStorageSync('userInfo');
if (userInfo.openid != undefined) {
wx.request({
url: urlPrefix + 'notice/getNoticeListByCond.html',
data: {
current,
size,
clazz: {
isDel: 0,
}
},
method: 'POST',
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
if (res.data.success) {
// debugger
console.log('getNoticeListByCond==>', res.data)
_this.setData({
noticeList: res.data.content.data,
total: res.data.content.pagination.total,
current: res.data.content.pagination.current,
pullFlag: true, // 注意（关键）：只有请求完成才设置标记参数
showFlag: true // 注意 （关键）：只有请求完成才设置标记参数
});
}
}
});
} else {
wx.showToast({
title: '请登录后进行操作！',
icon: 'none',
duration: 1500,
success: function () {
setTimeout(function () {
//要延时执行的代码
wx.navigateTo({
url: "../login/login"
})
}, 2000) //延迟时间
}
});
}
},
上拉加载数据
/**
* 上拉加载
* */
lower: function (e) {
// console.log(e);
console.log("上拉AAA");
/**
* 原理相同
* 这儿的数组也是获取已有的数组进行push增加
**/
let _this = this;
var userInfo = wx.getStorageSync('userInfo')
// 只有下拉请求回数据；下次下拉才有效
if (_this.data.pullFlag) {
// 页数乘以条数小于总条数
if (this.data.current * this.data.size < this.data.total) {
_this.setData({
pullFlag: false
});
console.log("上拉BBB");
wx.showLoading({
title: '加载中',
})
wx.request({
url: urlPrefix + 'notice/getNoticeListByCond.html',
data: {
current: this.data.current + 1, // 下拉加载加一页
size: this.data.size, // 下拉加载的条数
clazz: {
isDel: 0,
}
},
method: 'POST',
header: {
'content-type': 'application/json'
},
success: (res) => {
if (res.data.success) {
// debugger
// console.log('getNoticeListByCond==>lower==>', res.data)
if (res.data.content.data.length > 0) {
let {
noticeList
} = _this.data
for (let i = 0; i < res.data.content.data.length; i++) { //在这里获取后台的数组
noticeList.push(res.data.content.data[i]); //数组添加数据
}
_this.setData({
noticeList,
total: res.data.content.pagination.total,
current: res.data.content.pagination.current,
pullFlag: true, // 注意（关键）：只有请求完成才设置标记参数
showFlag: true // 注意 （关键）：只有请求完成才设置标记参数
});
}
}
wx.hideLoading();
}
});
}
}
},
总结：重复请求后台数据导致；当我们下拉的时候，上一页数据请求未完成，我们马上又下拉，导致重复请求后台数据，这样重复数据产生，所以我们在请求回数据后加下拉标记 pullFlag，只有上一次请求后台完成，才会执行下一次请求后台，这样我们就避免了重复数据。
本篇文章目的: 记录工作中遇到的问题，方便快速查询使用
如果文章有什么不妥的地方，感谢留言，相互学习！
