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();
      }
  • 相关阅读:
    一些简单的问题
    WebRTC的 windows 7 环境搭建
    HTML常用标签
    参考C#编程规范
    C#窗体调用(转载)
    java中的小知识(不断更行中。。。。。)
    CF1483E Vabank 题解
    CF755G PolandBall and Many Other Balls 题解
    CF1483D Useful Edges 题解
    CF1368F Lamps on a Circle 题解
  • 原文地址:https://www.cnblogs.com/XHappyness/p/8625430.html
Copyright © 2011-2022 走看看