下拉加载更多时bindscrolltolower多次执行

Question

wxml代码
<import src="../movie/movie.wxml"/>
<template name="movieGridTemplate">
	<scroll-view class="movie-grid" scroll-y="true" bindscrolltolower="moviePageScroll">
		<block wx:for="{{movies}}" wx:for-item="movieGrid" wx:key="movieGrid">
			<view class="grid-item">
				<template is="movieTemplate" data="{{...movieGrid}}"/>
			</view>
		</block>
	</scroll-view>
</template>

js代码
moviePageScroll:function(event) {
    var nextUrl = this.data.requestUrl + "?start=" + this.data.currentCount + "&count=20";
    util.getMovieRequest(nextUrl,this.handleMovieData);
  }

下拉一次bindscrolltolower事件触发好几次

鼠标滚动了一次，方法执行了四次

Answer 1

7七月 2017-03-30 12:24:37

对了，如果要测试这个问题。那么最好的方式是，写一个最简单的scroll-view测试下，把环境的问题分离开，单纯的测试下下拉会不会重复触发。

• 提问者 田小雨 #1

  谢谢老师

• 慕先生4561975 #2

  老师，scroll-view下拉是会触发多次的，我试过了官方给的那个例子。

• 慕先生4561975 #3

  是这样的，当已经触到底部scroll-view底部的时候，在上拉加载的话就不会重复触发，而如果慢慢拉到底部的时候，就会触发多次。

点开查看后面1条评论

Answer 2

7七月 2017-03-30 12:23:20

这个页面的代码写法，在小程序中途更新后，我做了修改，课程里也做了相应的字幕提醒。使用scroll-view会导致下拉刷新无法执行。更新文章 在这里：https://zhuanlan.zhihu.com/p/24739728?refer=oldtimes。建议改为使用view而不是scroll-view。至于多次刷新这个问题，我也单独在另外的项目里测试了下，没有发现多次执行的问题。

Answer 3

7七月 2017-03-30 12:18:48

稍等 我测试下

Answer 4

Peggy7 2017-05-10 15:55:29

我也遇到了这个问题 且各种找答案无果 最后自己试出来一个办法 将lower-threshold属性设为0或者1或者很小的值，就可以只加载一次 因为小程序更新后lower-threshold的默认值是50 超过50之后就会多次触发 希望答案有用

• 慕粉0724423299 #1

  嗯，对的

• 橘子菌 #2

  超6，很有帮助

• 橘子菌 #3

  又试了下还是有问题，调小数值下拉的反应就会变慢，老师的那篇文章也看了，偶尔还是会有重复加载的。。。小程序好多bug

点开查看后面3条评论

Answer 5

慕先生4561975 2017-11-16 22:33:13

我也遇到同样的问题，不但触发多次，还会出现数据重复的情况。昨晚想了一下，弄了一个解决方案：

在page里面加一个变量httpLock，初始值为false，表示请求锁定，每当请求的时候判断这个锁，如果当前已经发送请求了，那么对于后面出现的多次刷新则不发送请求，当http请求完成时，释放该锁就可以了。

当然也可以使用事件节流来达到此目的，在指定时间内只发送一次请求

Answer 6

之于子归_ 2017-07-23 21:21:31

用一个定时器来控制好了，1S内只允许触发一次