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();
      }
  • 相关阅读:
    Java服务停止与开启
    跨域,php后端处理
    Mac 504 gateway timeout nginx
    Tp3.2 多数据库链接
    Redis 设置密码
    Redis 如何对外访问 lnmp安装
    tensorflow gpu安装
    ngx_http_upstream_check_module
    Nginx负载均衡+监控状态检测
    springboot+log4j2+slf4j控制台打印带sql日志
  • 原文地址:https://www.cnblogs.com/XHappyness/p/8625430.html
Copyright © 2011-2022 走看看