<scroll-view class='more-movie-container' scroll-y='true' bindscrolltolower='onLoaderMoreMovies'>
<template is='movieGrid' data='{{moviesListData}}' />
<view class='bottom-tip' wx:if='{{isShowBottomTip}}'>
沒有數(shù)據(jù)了!
</view>
</scroll-view>
// 上滑加載更多數(shù)據(jù)
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>來實(shí)現(xiàn)上滑刷新功能,使用onPullDownRefresh事件處理函數(shù)來做下拉刷新功能,但是,實(shí)際情況是:當(dāng)下拉時(shí),下拉刷新事件沒有被觸發(fā),經(jīng)測(cè)試是因?yàn)?code><scroll-view></scroll-view>標(biāo)簽與onPullDownRefresh事件無法同時(shí)使用;
修改方法:
- 放棄使用
<scroll-view></scroll-view>標(biāo)簽,以及<scroll-view>標(biāo)簽上的所有屬性值,使用<view></view>標(biāo)簽替換,這樣就無法觸發(fā)bindscrolltolower事件,也就無法實(shí)現(xiàn)上滑加載了 - 使用
onReachBottom事件處理函數(shù)替換onLoaderMoreMovies事件處理函數(shù),onReachBottom事件是當(dāng)頁面滑動(dòng)到底部時(shí)觸發(fā),通過該事件來實(shí)現(xiàn)下滑加載
代碼如下:
<view class='more-movie-container'>
<template is='movieGrid' data='{{moviesListData}}' />
<view class='bottom-tip' wx:if='{{isShowBottomTip}}'>
沒有數(shù)據(jù)了!
</view>
</view>
// 上滑加載更多數(shù)據(jù)
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();
},