微信小程序小程序使用scroll-view不能使用下拉刷新的解決辦法

<scroll-view class="movie-grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="loadMoreMovie">
      <block wx:for="{{movies}}" wx:key="{{item}}">
        <view class="movie">
          <template is="movieTemplate" data="{{...item}}" />
        </view>
      </block>
      <text class="has-no-more" wx:if="{{hasNoMore}}">沒有更多了</text>
</scroll-view>

　　注意，此時scroll-view必須給一個高度才能實現下拉刷新。文檔中也有說道此組件會使不能在組件區域內觸發下拉刷新onPullDownRefresh事件。

解決辦法： 

使用view組件，

    <view class="movie-grid-container">
      <block wx:for="{{movies}}" wx:key="{{item}}">
        <view class="movie">
          <template is="movieTemplate" data="{{...item}}" />
        </view>
      </block>
      <text class="has-no-more" wx:if="{{hasNoMore}}">沒有更多了</text>
    </view>

　　此時view可不用設置高度

1. 實現下拉刷新

在.json文件中配置 "enablePullDownRefresh": true，然后在.js中

onPullDownRefresh: function(event) {
    //此處可實現下拉刷新數據，刷新完數據最好 wx.stopPullDownRefresh()；
},

 

2. 實現上拉加載更多

只需要在.js中

  onReachBottom: function(event) {
    wx.showNavigationBarLoading();  //顯示導航欄加載按鈕
    //加載完記得  wx.hideNavigationBarLoading();
  }