js实现手机端可以上拉刷新，动态通过ajax从后台获取数据

系统管理员 2022-08-18 12:05 8阅读 0赞

使用mui框架，需要导入<pre name="code" class="html">mui.min.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>公共自行车</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<meta name="apple-mobile-web-app-capable" content="yes">
    		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    		
    		<link rel="stylesheet" href="css/wechat/mui.min.css">
    		
    		<link rel="stylesheet" type="text/css" href="css/wechat/app.css" />
    		<script src="plug-in/jquery/jquery-1.8.3.min.js"></script>
    		<script src="scripts/mui.min.js"></script>
    		<script src="scripts/main.js"></script>
    		<style>
    			.mui-bar {
    				height: 60px;
    			}
    			
    			.mui-bar input[type="search"] {
    				height: 40px;
    				margin: 10px 0;
    			}
    			
    			.mui-input-row .mui-icon-speech ~ .mui-placeholder {
    				right: initial;
    			}
    			
    			.mui-input-row .mui-input-clear ~ .mui-icon-clear.mui-hidden ~ .mui-icon-speech {
    				display: none;
    			}
    			
    			.mui-bar .mui-input-row .mui-input-clear ~ .mui-icon-clear,
    			.mui-bar .mui-input-row .mui-input-speech ~ .mui-icon-speech {
    				top: 10px;
    				right: 30px;
    			}
    			
    			.mui-placeholder {
    				margin: 10px 4px;
    			}
    			
    			.mui-btn-blue,
    			.mui-btn-primary,
    			input[type="submit"] {
    				background-color: #ff9900;
    				border: 1px solid #ff9900;
    				padding: 5px 100px;
    				font-size: 24px;
    			}
    			
    			.mui-bar .mui-icon {
    				font-size: 30px;
    			}
    			
    			.mui-bar .mui-btn {
    				padding: 2px 10px;
    				line-height: normal;
    			}
    			
    			.mui-content span {
    				height: 60px;
    				display: block;
    				width: auto;
    			}
    			
    			.mui-content table {
    				width: 100%;
    			}
    			
    			.text-lve {
    				overflow: hidden;
    				white-space: pre-wrap;
    				text-overflow: ellipsis;
    				width:80%;
    				line-height: 20px;
    			}
    			
    			u {
    				text-decoration: none;
    				color: #ff9900;
    				margin-right: 12px;
    			}
    		</style>
    	</head>
    	<body>
    		<header class="mui-bar">
    			<div class="mui-input-row mui-search" style="margin-right: 80px; position: relative;">
    				<input type="search" id="searchVale" οninput="changeVale(this.value)" onpropertychange="changeVale(this.value)" class="mui-input-speech mui-input-clear" placeholder="网点搜索">
    				<a href="" style="position: absolute; top:18px; right: 8px;">
    					<img src="images/wechat/dingwei1.png" width="24">
    				</a>
    			</div>
    			<button type="button"  class="mui-btn mui-btn-primary mui-icon mui-icon-map" style="position: absolute; right: 14px; top:10px;">
    		</header>
    		<div class="mui-content mui-scroll-wrapper" id="search">
    			
    			<div class="mui-scroll" style="padding-top:55px;">
    			<ul class="mui-table-view" id="bikeStationList">
    				<li></li>
    			 </ul>
    			 </div>
    		
    		</div>
    		<nav class="mui-bar mui-bar-tab" >
    			<p style="margin: 4px 8px;">
    				目前自行车网点覆盖陈村、均安、勒流、龙江、伦教、杏坛，暂不包含大良、乐从、容桂、北滘
    			</p>
    		</nav>
    	</body>
    	<script type="text/javascript">
    	//进入页面默认查询所有站点方法
    	/*   $(function(){
    		//searchBike();
    	});   */
    	
    	//监听搜索框内容变化，自动匹配站点
    	function changeVale(textValue){
    		searchBike(textValue)
    	}
    	
    	//ajax传值实时查询方法
    	function searchBike(textValue){
    	var keyWord = textValue;
    	 doGet(g_wssturl + "RXWSSTWeb/publicBicycle.web?getNearGgzxcList", {lontitude:113.300854,latitude:22.810388,keyWord:keyWord,pageIndex:0},function(data){
             if(data.success) {
            	 var obj = jQuery.parseJSON(data.obj);
            	 bikeStationList(obj);
             }
         }, null, "jsonp");
    	}
    	
    	//站点拼接方法
    	 function bikeStationList(data){
    		 var bikeHtml = "";
    		 var list = $("#bikeStationList");
    		 if(data !="" && data.length>0){
    			 for(var i=0;i <data.length;i++){
    				 bikeHtml+='<li class="mui-table-view-cell mui-media"><a href="javascript:;"><table><tr><th class="text-lve">'+data[i].PARK_NAME+'</th></tr>';
    				 bikeHtml+='<tr><td class="text-lve">地址：'+data[i].PARK_ADDR+'</td><td style="text-align: center;"><a href="" class="pic_qiu" style=""><img src="images/wechat/pic_qiu.png" width="30"></a></td></tr>';
    				 bikeHtml+='<tr><td><u>可借：'+data[i].NUM1+'</u><u>可停：'+data[i].NUM2+'</u><u>异常：'+data[i].NUM3+'</u></td><td style="text-align: center;">'+data[i].D+'km</td></tr></table></a></li>';
    				 $("ul li:last-child").after(bikeHtml);;
    			 }
    		 }
    		 list.html(bikeHtml);
    	 }
    		//下拉进行刷新方法
    	  mui.init({
    			pullRefresh: {
    				container: '#search',
    				up: {
    					contentrefresh: '正在加载...',
    					callback: pullupRefresh
    				}
    			}
    		});
    			
    			//下拉操作执行获取数据
    		var flage= true;//判断条件
    		var pageIndex =1;//请求页数
    			function pullupRefresh() {
    				setTimeout(function() {
    				 	  var keyWord = $("#searchVale").val();
    					var obj="";
    					 if(flage) {
    					 doGet(g_wssturl + "RXWSSTWeb/publicBicycle.web?getNearGgzxcList", {lontitude:113.300854,latitude:22.810388,keyWord:keyWord,pageIndex:pageIndex},function(data){
    						 if(data != '') {
    							 obj = jQuery.parseJSON(data.obj);
    				        	 
    				    		 if(obj !="" && obj.length>0){
    				    			 for(var i=0;i <obj.length;i++){
    				    				 var bikeHtml = "";
    				    				 bikeHtml+='<li class="mui-table-view-cell mui-media"><a href="javascript:;"><table><tr><th class="text-lve">'+obj[i].PARK_NAME+'</th></tr>';
    				    				 bikeHtml+='<tr><td class="text-lve">地址：'+obj[i].PARK_ADDR+'</td><td style="text-align: center;"><a href="" class="pic_qiu" style=""><img src="images/wechat/pic_qiu.png" width="30"></a></td></tr>';
    				    				 bikeHtml+='<tr><td><u>可借：'+obj[i].NUM1+'</u><u>可停：'+obj[i].NUM2+'</u><u>异常：'+obj[i].NUM3+'</u></td><td style="text-align: center;">'+obj[i].D+'km</td></tr></table></a></li>';
    				        	 		 $("ul li:last-child").after(bikeHtml);
    				    			 }
    								 mui('#search').pullRefresh().endPullupToRefresh(!flage); //控制是否还有数据执行刷新操作
    				    		 }
    				         }
    						 //判断当数据为空时不再执行刷新操作
    				         if(obj.length == 0){
    							 flage = false;
    						 }else{
    							 flage = true;
    							 pageIndex++;
    						 }
    				     }, null, "jsonp");  
    						
    					 }  
    				}, 1000);
    			}
    		 	if (mui.os.plus) {
    				mui.plusReady(function() {
    					setTimeout(function() {
    						mui('#search').pullRefresh().pullupLoading();
    					}, 1000);
    
    				});
    			} else {
    				mui.ready(function() {
    					mui('#search').pullRefresh().pullupLoading();
    				});
    			}  
    		 	
    	</script>
    </html>