MUI 下拉刷新

最新推荐文章于 2024-04-27 08:56:53 发布

原创最新推荐文章于 2024-04-27 08:56:53 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

MUI移动框架专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用mui框架实现下拉刷新功能，并解决低端Android设备上可能出现的卡顿问题。通过双webview方案提高动画流畅度，同时提供了一个具体的代码示例说明如何配置和初始化下拉刷新。

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但mui经过封装，可使用一套代码实现下拉刷新。 MUI本身是在IOS UI的基础上拓展Android的。所以在IOS上的适合度高于安卓。

例子：有index.html 和 list.html两个页面，list用于存放数据，而index主要作为一个框架存放头部和尾部。

index.html:

<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">主页面和子页面解决滚动卡顿的问题</h1>
	</header>

mui.init({
		    subpages:[{
		      url:'list.html',//下拉刷新内容页面地址
		      id:'haha',//内容页面标志
		      styles:{
		        top:'40px',
		        bottom:'0px'
		      }
		    }]  
  });

list.html

	mui.init({
				pullRefresh : {
		    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      height:50,//可选,默认50.触发下拉刷新拖动距离,
		      auto: true,//可选,默认false.自动下拉刷新一次
		      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		     callback :show //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    
		    
		  }}
		    
				
				
			});
			function show()
			{
				console.log(1);//这里用来写逻辑，从服务器上获取最新数据并更新
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();//下拉刷新结束之后。回到顶部
				
			}

	    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">
      <li class="mui-table-view-cell" >Item 111111</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 9</li>
    </ul>
  </div>
	</div>