微信小程序:在使用了<scroll-view>标签后,下拉刷新事件失效

<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事件无法同时使用;

修改方法:

  1. 放弃使用<scroll-view></scroll-view>标签,以及<scroll-view>标签上的所有属性值,使用<view></view>标签替换,这样就无法触发 bindscrolltolower事件,也就无法实现上滑加载了
  2. 使用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();
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 科学的技术与我们的生活息息相关,是我们文明进步的“阶梯”。可是,在发展的同时,进步的需求现在给我们更多的问...
    62张栋勇阅读 1,883评论 0 0
  • 不用怀疑 ,我们是同父同母的亲生姐弟。作为中国传统家庭,我们家的重男轻女观念根深蒂固,于是,我弟出生之后,作为家里...
    江城雪儿阅读 2,448评论 0 0