您现在的位置:首页 >> 前端 >> 内容

关于mui框架内容区域滚动部分详解注意事项讲解

时间:2018/6/14 10:25:52 点击:

  核心提示:(1)下拉刷新完成后要结束下拉刷新 不仅要渲染页面还需要调用结束下拉刷新的方法mui(.mui-scroll-wrapper).pullRefresh().endPulldownToRefresh()...

(1)下拉刷新完成后要结束下拉刷新 不仅要渲染页面还需要调用结束下拉刷新的方法

mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();

(2)上拉加载提示没有数据的时候 如果下拉刷新需要再次能够上拉加载 在下拉刷新的回调函数还需要重置上拉加载

mui('.mui-scroll-wrapper').pullRefresh().refresh(true);

 创建一个MUI区域滚动的父容器.mui-scroll-wrapper  
 创建一个mui区域滚动的子容器.mui-scroll  
   <!-- 区域滚动的父容器 -->  
    <p class="mui-scroll-wrapper">  
        <!-- 区域滚动的子容器 -->  
        <p class="mui-scroll">  
          真实要显示的DOM内容  
        </p>  
    </p>  
 调用初始化下拉刷新的方法初始化下拉刷新插件  
    mui.init({  
      pullRefresh: {  
          container: ".mui-scroll-wrapper", // 传入区域滚动父容器的选择器  
          down: {  
              height: 50, //可选,默认50.触发下拉刷新拖动距离,  
              auto: false, //可选,默认false.首次加载自动下拉刷新一次  
              contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
              contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
              contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
              callback: function(){  
  
              }  
              //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
          }  
      }  
  });  
  
在callback的回调函数里面去执行下拉刷新的刷新操作  执行完下拉操作后需要结束下拉刷新(如果不结束就会一直转圈圈)  
mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();  

Tags:关于 于M MU UI 
作者:网络 来源:qq_3455925