小程序列表分页查询数据,应用scroll-view总是出现多触发bindscrolltolower的情况,有遇到过的或者解决过的么。请教。。。
测试页面代码:
mocklist.js代码:
var mocklist = [{
"id": 1,
"name": "小丽1",
"status": "ZT1",
"time": "SH1"
}, {
"id": 2,
"name": "小丽2",
"status": "ZT2",
"time": "SH2"
}, {
"id": 3,
"name": "小丽3",
"status": "ZT3",
"time": "SH3"
}, {
"id": 4,
"name": "小丽4",
"status": "ZT4",
"time": "SH4"
}, {
"id": 5,
"name": "小丽5",
"status": "ZT5",
"time": "SH5"
}, {
"id": 6,
"name": "小丽6",
"status": "ZT6",
"time": "SH6"
}, {
"id": 7,
"name": "小丽7",
"status": "ZT7",
"time": "SH7"
}, {
"id": 8,
"name": "小丽8",
"status": "ZT8",
"time": "SH8"
}, {
"id": 9,
"name": "小丽9",
"status": "ZT9",
"time": "SH9"
}, {
"id": 10,
"name": "小丽10",
"status": "ZT10",
"time": "SH10"
}, {
"id": 11,
"name": "小丽11",
"status": "ZT11",
"time": "SH11"
}, {
"id": 12,
"name": "小丽12",
"status": "ZT12",
"time": "SH12"
}, {
"id": 13,
"name": "小丽13",
"status": "ZT13",
"time": "SH13"
}, {
"id": 14,
"name": "小丽14",
"status": "ZT14",
"time": "SH14"
}, {
"id": 15,
"name": "小丽15",
"status": "ZT15",
"time": "SH15"
}, {
"id": 16,
"name": "小丽16",
"status": "ZT16",
"time": "SH16"
}, {
"id": 17,
"name": "小丽17",
"status": "ZT17",
"time": "SH17"
}, {
"id": 18,
"name": "小丽18",
"status": "ZT18",
"time": "SH18"
}, {
"id": 19,
"name": "小丽19",
"status": "ZT19",
"time": "SH19"
}, {
"id": 20,
"name": "小丽20",
"status": "ZT20",
"time": "SH20"
}, {
"id": 21,
"name": "小丽21",
"status": "ZT21",
"time": "SH21"
}, {
"id": 22,
"name": "小丽22",
"status": "ZT22",
"time": "SH22"
}, {
"id": 23,
"name": "小丽23",
"status": "ZT23",
"time": "SH23"
}, {
"id": 24,
"name": "小丽24",
"status": "ZT24",
"time": "SH24"
}, {
"id": 25,
"name": "小丽25",
"status": "ZT25",
"time": "SH25"
}, {
"id": 26,
"name": "小丽26",
"status": "ZT26",
"time": "SH26"
}, {
"id": 27,
"name": "小丽27",
"status": "ZT27",
"time": "SH27"
}, {
"id": 28,
"name": "小丽28",
"status": "ZT28",
"time": "SH28"
}, {
"id": 29,
"name": "小丽29",
"status": "ZT29",
"time": "SH29"
}, {
"id": 30,
"name": "小丽30",
"status": "ZT30",
"time": "SH30"
}, {
"id": 31,
"name": "小丽31",
"status": "ZT31",
"time": "SH31"
}, {
"id": 32,
"name": "小丽32",
"status": "ZT32",
"time": "SH32"
}, {
"id": 33,
"name": "小丽33",
"status": "ZT33",
"time": "SH33"
}, {
"id": 34,
"name": "小丽34",
"status": "ZT34",
"time": "SH34"
}, {
"id": 35,
"name": "小丽35",
"status": "ZT35",
"time": "SH35"
}, {
"id": 36,
"name": "小丽36",
"status": "ZT36",
"time": "SH36"
}, {
"id": 37,
"name": "小丽37",
"status": "ZT37",
"time": "SH37"
}, {
"id": 38,
"name": "小丽38",
"status": "ZT38",
"time": "SH38"
}, {
"id": 39,
"name": "小丽39",
"status": "ZT39",
"time": "SH39"
}, {
"id": 40,
"name": "小丽40",
"status": "ZT40",
"time": "SH40"
}, {
"id": 41,
"name": "小丽41",
"status": "ZT41",
"time": "SH41"
}, {
"id": 42,
"name": "小丽42",
"status": "ZT42",
"time": "SH42"
}, {
"id": 43,
"name": "小丽43",
"status": "ZT43",
"time": "SH43"
}, {
"id": 44,
"name": "小丽44",
"status": "ZT44",
"time": "SH44"
}, {
"id": 45,
"name": "小丽45",
"status": "ZT45",
"time": "SH45"
}, {
"id": 46,
"name": "小丽46",
"status": "ZT46",
"time": "SH46"
}, {
"id": 47,
"name": "小丽47",
"status": "ZT47",
"time": "SH47"
}, {
"id": 48,
"name": "小丽48",
"status": "ZT48",
"time": "SH48"
}, {
"id": 49,
"name": "小丽49",
"status": "ZT49",
"time": "SH49"
}, {
"id": 50,
"name": "小丽50",
"status": "ZT50",
"time": "SH50"
}, {
"id": 51,
"name": "小丽51",
"status": "ZT51",
"time": "SH51"
}, {
"id": 52,
"name": "小丽52",
"status": "ZT52",
"time": "SH52"
}, {
"id": 53,
"name": "小丽53",
"status": "ZT53",
"time": "SH53"
}, {
"id": 54,
"name": "小丽54",
"status": "ZT54",
"time": "SH54"
}, {
"id": 55,
"name": "小丽55",
"status": "ZT55",
"time": "SH55"
}, {
"id": 56,
"name": "小丽56",
"status": "ZT56",
"time": "SH56"
}, {
"id": 57,
"name": "小丽57",
"status": "ZT57",
"time": "SH57"
}, {
"id": 58,
"name": "小丽58",
"status": "ZT58",
"time": "SH58"
}, {
"id": 59,
"name": "小丽59",
"status": "ZT59",
"time": "SH59"
}, {
"id": 60,
"name": "小丽60",
"status": "ZT60",
"time": "SH60"
}, {
"id": 61,
"name": "小丽61",
"status": "ZT61",
"time": "SH61"
}, {
"id": 62,
"name": "小丽62",
"status": "ZT62",
"time": "SH62"
}, {
"id": 63,
"name": "小丽63",
"status": "ZT63",
"time": "SH63"
}, {
"id": 64,
"name": "小丽64",
"status": "ZT64",
"time": "SH64"
}, {
"id": 65,
"name": "小丽65",
"status": "ZT65",
"time": "SH65"
}, {
"id": 66,
"name": "小丽66",
"status": "ZT66",
"time": "SH66"
}, {
"id": 67,
"name": "小丽67",
"status": "ZT67",
"time": "SH67"
}, {
"id": 68,
"name": "小丽68",
"status": "ZT68",
"time": "SH68"
}, {
"id": 69,
"name": "小丽69",
"status": "ZT69",
"time": "SH69"
}, {
"id": 70,
"name": "小丽70",
"status": "ZT70",
"time": "SH70"
}, {
"id": 71,
"name": "小丽71",
"status": "ZT71",
"time": "SH71"
}, {
"id": 72,
"name": "小丽72",
"status": "ZT72",
"time": "SH72"
}, {
"id": 73,
"name": "小丽73",
"status": "ZT73",
"time": "SH73"
}, {
"id": 74,
"name": "小丽74",
"status": "ZT74",
"time": "SH74"
}];
module.exports.mocklist = mocklist;
----------------------------------------------------------------------------------------------------
//mocklist 模拟数据库数据表数据
var mocklist = require("./mocklist.js").mocklist;
// pages/pullReachForEle/pullReachForEle.js
Page({
/**
* 页面的初始数据
*/
data: {
ispro: false,//是否在请求中
current: 1,//页数,开始是1从第一页开始请求
size: 15,//请求的个数,可自定义设置
isnext: true,//是否有下一页
selected: true,
selected1: false,
cllist: [],
page: 1,
zt: 1,
cah: '',
bs: 'fajkj',
CJsUserMc: '',
scrollHeight: 500,
scrollTop: '',
isDisplaySearch: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: (res) => {
console.log(res.windowHeight - 150)
that.setData({
scrollHeight: res.windowHeight - 150
})
}
})
//第一页数据
that.setData({ ispro: true })//标记在请求中
wx.showToast({
mask: true,
title: '加载中...',
icon: 'loading',
duration: 500
})
that.$_get(
that.data.current,
that.data.size
, function () {
console.log("第1页加载成功")
wx.showToast({
mask: true,
title: '加载成功',
icon: 'success',
duration: 500
})
},
function () {
console.log("第1页加载失败")
wx.showToast({
mask: true,
title: '加载失败',
icon: 'none',
duration: 500
})
})
},
//模拟后台返回数据
SEVER_PHP: function (objs) {
var that = this;
var res = {};
setTimeout(function () {
res.current = objs.current;//第几页
res.allcount = mocklist.length;//总记录个数
res.allpage = Math.ceil(mocklist.length / objs.size)//总页数
res.cllist = mocklist.slice((objs.current - 1) * objs.size, (objs.current - 1) * objs.size + objs.size);//实际数据
res.isnext = (objs.current - 1) * objs.size + objs.size > mocklist.length ? false : true//是否有下一页
objs.success(res);
}, 500);
},
selected: function (e) {
var that = this;
that.setData({
selected1: false,
selected: true,
cllist: [],
page: 1,
scrollTop: '',
zt: 1
})
// that.getClszList();
},
selected1: function (e) {
var that = this;
that.setData({
selected: false,
selected1: true,
cllist: [],
page: 1,
scrollTop: '',
zt: 2
})
// that.getClszList();
},
/**
* 搜索页面
*/
bindsearch: function (e) {
// wx.navigateTo({
// url: 'search/search',
// })
},
//ajax请求数据 依据实际请求进行修改
$_get: function (current, size, success, err) {
var that = this;
that.SEVER_PHP({
current: current,
size: size,
success: function (res) {
console.log(res, "接口返回结果");
success();//回调
that.setData({ cllist: that.data.cllist.concat(res.cllist) })//接口实际数据
that.setData({ current: res.current })//第几页
that.setData({ isnext: res.isnext })//是否有下一页
setTimeout(function () {//避免过快请求
that.setData({ ispro: false })//标记不在请求中
}, 1000)
},
err: function () {
err();//回调
setTimeout(function () {//避免过快请求
that.setData({ ispro: false })//标记不在请求中
}, 1000)
}
});
},
//滚动到顶部/左边,会触发 scrolltoupper 事件
upper:function(){
},
//滚动到底部/右边,会触发 scrolltolower 事件
lower: function () {
var that = this
if (!that.data.ispro) {//没有在请求中,开始加载数据
if (that.data.isnext) {//有下一页数据
//下一页数据
that.setData({ ispro: true })//标记在请求中
wx.showToast({
mask: true,
title: '加载中...',
icon: 'loading',
duration: 500
})
//触底操作,追加一页
var addpage = that.data.current + 1;
that.$_get(
addpage,
that.data.size
, function () {
console.log("第" + addpage + "页加载成功")
wx.showToast({
mask: true,
title: '加载成功',
icon: 'success',
duration: 500
})
},
function () {
console.log("第" + addpage + "页加载失败")
wx.showToast({
mask: true,
title: '加载失败',
icon: 'none',
duration: 500
})
})
} else {
console.log("没有数据了")
wx.showToast({
mask: true,
title: '没有数据了',
icon: 'none',
duration: 500
})
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
------------------------------------------------------------------------------------------
页面代码:
<!--pages/pullReachForEle/pullReachForEle.wxml-->
<view class="container">
<view class='container-tab'>
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">待存放</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">已存放</view>
</view>
<image src='./img/icon-search.png' class='fd-Tab-Search' bindtap='bindsearch' wx:if='{{isDisplaySearch}}'></image>
</view>
<view class="{{selected?'show':'show'}}">
<scroll-view class='fd-clsz-Item' scroll-y style="height:{{scrollHeight}}px;" bindscrolltolower='lower'>
<view wx:if="{{cllist.length == 0}}" class='fd-Zw'>暂无数据</view>
<view class='item' wx:for="{{cllist}}" wx:key="unique">
<view class='item-name'>名称:{{item.name}}</view>
<view class='item-box'>
<view class='item-status'>状态:{{item.status}}</view>
<view class='item-time'>时间:{{item.time}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
这个问题我这边也出现了,下拉和上拉,upper和lower都会出现多次调用。ip6,wx版本6.7.2,真机调试下
你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
安卓小米MIX2也可以轻松复现。
onPageScroll这个事件会触发多次,加了请求锁都不行,所以改用scroll-view,但是scroll-view中用canvas又会抖动。二者起码解决其一吧。
会不会是数据还没加载完成就又发生了误操作,建议加个wx.showloading(),直到加载完成才消失