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();
      }
  • 相关阅读:
    有效的字母异位词---简单
    字符串中的第一个唯一字符---简单
    整数反转---简单
    使用httpServlet方法开发
    servlet生命周期
    tomcat_user文件的1配置
    selvlet入门自己部署(sevlet接口实现)
    数据库mysql实战
    tomcat的熟悉目录结构
    虚拟主机
  • 原文地址:https://www.cnblogs.com/XHappyness/p/8625430.html
Copyright © 2011-2022 走看看