<scroll-view class='more-movie-container' scroll-y='true' bindscrolltolower='onLoaderMoreMovies'>
<template is='movieGrid' data='{{moviesListData}}' />
<view class='bottom-tip' wx:if='{{isShowBottomTip}}'>
没有数据了!
</view>
</scroll-view>
// 上滑加载更多数据
onLoaderMoreMovies: function(event) {
if (this.data.requestUrl.length && this.data.totalMovies > this.data.moviesListData.length) {
wx.showNavigationBarLoading();
utils.http(`${this.data.requestUrl}?start=${this.data.moviesListData.length}&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
}
},
// 下拉刷新
onPullDownRefresh: function(event) {
this.data.moviesListData = [];
utils.http(`${this.data.requestUrl}?start=0&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
wx.showNavigationBarLoading();
},
如上所示,使用了<scroll-view></scroll-view>
来实现上滑刷新功能,使用onPullDownRefresh事件处理函数
来做下拉刷新功能,但是,实际情况是:当下拉时,下拉刷新事件没有被触发
,经测试是因为<scroll-view></scroll-view>
标签与onPullDownRefresh
事件无法同时使用;
修改方法:
- 放弃使用
<scroll-view></scroll-view>
标签,以及<scroll-view>
标签上的所有属性值,使用<view></view>
标签替换,这样就无法触发bindscrolltolower事件
,也就无法实现上滑加载了
- 使用
onReachBottom事件处理函数
替换onLoaderMoreMovies
事件处理函数,onReachBottom事件
是当页面滑动到底部时触发,通过该事件来实现下滑加载
代码如下:
<view class='more-movie-container'>
<template is='movieGrid' data='{{moviesListData}}' />
<view class='bottom-tip' wx:if='{{isShowBottomTip}}'>
没有数据了!
</view>
</view>
// 上滑加载更多数据
onReachBottom: function(event) {
if (this.data.requestUrl.length && this.data.totalMovies > this.data.moviesListData.length) {
wx.showNavigationBarLoading();
utils.http(`${this.data.requestUrl}?start=${this.data.moviesListData.length}&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
}
},
// 下拉刷新
onPullDownRefresh: function(event) {
this.data.moviesListData = [];
utils.http(`${this.data.requestUrl}?start=0&count=20`, this.processDoubanData, this.getMoviesListDataErrorDeal);
wx.showNavigationBarLoading();
},