小程序列表分页查询数据,应用scroll-view总是出现多触发的情况
小程序列表分页查询数据,应用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>