美文网首页
微信小程序:在使用了<scroll-view>标签后

微信小程序:在使用了<scroll-view>标签后

作者: 放风筝的小小马 | 来源:发表于2018-07-14 11:51 被阅读3331次
    <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();
      },
    

    相关文章

      网友评论

          本文标题:微信小程序:在使用了<scroll-view>标签后

          本文链接:https://www.haomeiwen.com/subject/uqoepftx.html