微信小程序小程序使用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();
  }

 

 

 

转载于:https://www.cnblogs.com/XHappyness/p/8625430.html