zoukankan      html  css  js  c++  java
  • 微信小程序小程序使用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();
      }
  • 相关阅读:
    [LA] 3027
    [POJ] 3264 Balanced Lineup [ST算法]
    [LA] 3644
    [Codeforces Round #248 (Div. 2)] B. Kuriyama Mirai's Stones
    [Codeforces Round #248 (Div. 2)] A. Kitahara Haruki's Gift
    [Codeforces Round #247 (Div. 2)] B. Shower Line
    [Codeforces Round #247 (Div. 2)] A. Black Square
    [UVA] 784
    [OpenJudge] 百练2754 八皇后
    449 Set、Map数据结构
  • 原文地址:https://www.cnblogs.com/XHappyness/p/8625430.html
Copyright © 2011-2022 走看看