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

最新推荐文章于 2023-06-26 18:26:27 发布

我还是个少年

最新推荐文章于 2023-06-26 18:26:27 发布

阅读量8k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/a347911/article/details/50339993

版权

jquery 专栏收录该内容

3 篇文章 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">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/wechat/mui.min.css">
		<!--App自定义的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">
			<!-- <span></span> -->
			<div class="mui-scroll" style="padding-top:55px;">
			<ul class="mui-table-view" id="bikeStationList">
				<li></li>
			 </ul>
			 </div>
		<!-- 	<span></span> -->
		</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>