收藏
回答

小程序列表分页查询数据,应用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> 



最后一次编辑于  2018-07-25
回答关注问题邀请回答
收藏

3 个回答

  • kokais
    kokais
    2018-09-14

    这个问题我这边也出现了,下拉和上拉,upper和lower都会出现多次调用。ip6,wx版本6.7.2,真机调试下

    2018-09-14
    有用
    回复
  • 是小白啊
    是小白啊
    2018-07-25

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-07-25
    有用
    回复 1
    • 静候嘉音♪彼岸花开
      静候嘉音♪彼岸花开
      2018-07-30

      安卓小米MIX2也可以轻松复现。

      onPageScroll这个事件会触发多次,加了请求锁都不行,所以改用scroll-view,但是scroll-view中用canvas又会抖动。二者起码解决其一吧。

      2018-07-30
      回复
  • 許yu颖
    許yu颖
    2018-07-25

    会不会是数据还没加载完成就又发生了误操作,建议加个wx.showloading(),直到加载完成才消失


    2018-07-25
    有用
    回复
登录 后发表内容