移动端MUI上拉加载列表、日期(公众号)

梦里梦外; 2023-06-25 06:14 39阅读 0赞

# MUI框架的上拉加载列表使用方法 #

MUI官方称它轻量、原生、以iOS平台UI为基础，补充部分Android平台特有的UI控件，

开发工具指定是HBulider莫属，然后新建Web项目，结构如下：  
![在这里插入图片描述][20191226163820340.png]  
因为你的项目里要大量引入mui扩展插件的css/js，要下载这些文件，你可以再新建一个mui项目，这里面有MUI所有的组件文件还有示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
从这个模板里面拿出你要的文件放进自己的项目：  
![在这里插入图片描述][2019122616402043.png]  
然后开始造作吧，项目后端还没通，所有用的假数据：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mui.min.js"></script>
        <script src="js/mui.picker.js"></script>
        <script src="js/mui.dtpicker.js"></script>
        <script src="js/mui.poppicker.js"></script>
        
        
        <link href="css/mui.min.css" rel="stylesheet"/>
        <link href="css/mui.picker.css" rel="stylesheet"/>
        <link href="css/mui.dtpicker.css" rel="stylesheet"/>
        <link href="css/mui.poppicker.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
          	mui.init();
        </script>
        <style type="text/css">
        	/*不要学我，样式写在外面，我这是示例*/
        	.timeBtn{ 
        		width: 100%;
        	}
        	#refreshContainer{ 
        		top: 100px;
        		height: 400px;
        		border-top: 1px solid #0062CC;
        		border-bottom: 1px solid #0062CC;
        	}
        	.mui-table-view-cell.mui-active{ 
    			background-color: #0062CC;
    		}
        </style>
    </head>
    <body>
    	<button type="button" class="starttime timeBtn" id="starttime">开始日期</button>
    	<button type="button" class="endtime timeBtn" id="endtime">结束日期</button> 
    	
    	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    		  <div class="mui-scroll">
    		    	
    			    <ul class="mui-table-view mui-table-view-chevron">
    			      
    			    </ul>
    		  </div>
    	</div>
    	<script>
    		// 日期组件
    		document.getElementById('starttime').addEventListener('tap', function(){ 
    		    option={ "type":"date","beginYear":"1980","endYear":"2080"};
    		     var picker = new mui.DtPicker(option);
    		     picker.show(function(rs) { 
    		        document.getElementById('starttime').innerHTML = rs.text;
    		     }); 
    		},false);
    		//结束时间
    		document.getElementById('endtime').addEventListener('tap', function(){ 
    		    option={ "type":"date","beginYear":"1980","endYear":"2080"};
    		    var picker = new mui.DtPicker(option);
    		    picker.show(function(rs) { 
    		        document.getElementById('endtime').innerHTML = rs.text;
    		    }); 
    		},false);
    		
    		// 上拉加载
    		mui.init({ 
    			pullRefresh : { 
    			    container: '#refreshContainer',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
    			    up: { 
    			      height:50,//可选.默认50.触发上拉加载拖动距离
    			      auto:true,//可选,默认false.自动上拉加载一次
    			      contentrefresh : "拼命加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
    			      contentnomore:'- 我是有底线的 -',//可选，请求完毕若没有更多数据时显示的提醒内容；
    			      callback :pullfreshFun //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    			    }
    			}
    		});
    		var counter = 10    // 当前页数
    		function pullfreshFun () { 
    			var result = ""
    			// ajax请求list数据 传入counter页数
    			setTimeout(function () { 
    				for (var j = 0; j < counter; j++) { 
    					result += '<li class="mui-table-view-cell">'+counter+'</li>'	
    				}
    				$('#refreshContainer .mui-scroll .mui-table-view').append($(result))
    				mui('#refreshContainer').pullRefresh().endPullupToRefresh((++counter>15));// 这个15是你获取数据的总页数，当你请求的页数counter>你的总页数(后台获取或者自己计算)，则结束上拉加载
    			}, 5000)
    		}
    	</script>
    </body>
    </html>

看一下效果：  
![在这里插入图片描述][20191226170350228.gif]  
压缩完有些小，凑合看吧

[20191226163820340.png]: https://img-blog.csdnimg.cn/20191226163820340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226163851205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[2019122616402043.png]: https://img-blog.csdnimg.cn/2019122616402043.png
[20191226170350228.gif]: https://img-blog.csdnimg.cn/20191226170350228.gif