mescroll实现移动端上拉加载下拉刷新

最新推荐文章于 2024-05-15 10:27:02 发布

大理无名道路

最新推荐文章于 2024-05-15 10:27:02 发布

阅读量517

点赞数

本文链接：https://blog.csdn.net/qq_34228805/article/details/106646583

版权

html

<!DOCTYPE html>
<html lang="en" style="background:#f7f7f7 ">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no，minimum-scale=1.0" />
 
     <script src="../../js/brandCustomization/rem.js"></script>
    <title></title>
	
	<style type="text/css">
				* {
					margin: 0;
					padding: 0;
					-webkit-touch-callout:none;
					-webkit-user-select:none;
					-webkit-tap-highlight-color:transparent;
				}
				body{background-color: white}
				ul{list-style-type: none}
				img{width: 100%;vertical-align: bottom;}
				
				/*模拟的标题,底部*/
				.header{
					z-index: 9990;
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 3.7rem;
					border-bottom: 1px solid #eee;
					/* background-image: url(img/zhihu1.jpg); */
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-color: white;
				}
				.footer{
					z-index: 9990;
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 50px;
					border-top: 1px solid #eee;
					/* background-image: url(img/zhihu5.jpg); */
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					background-color: white;
				}
				
				/*列表*/
				.mescroll{
					position: fixed;
					top: 3.7rem;
					bottom: 51px;
					height: auto;
				}
				/*回到顶部按钮*/
				.mescroll-totop {
					bottom: 70px;
				}
				
				/*下拉刷新回调的提示*/
				.download-tip{
					z-index: 9900;
					position: fixed;
					top: 160px;
					left: 0;
					width: 100%;
					height: 24px;
					line-height: 24px;
					font-size: 12px;
					text-align: center;
					background-color: rgba(80,175,85,.7);
					color: white;
					-webkit-transition: top 300ms;
					transition: top 300ms;
				}
				
				/*展示上拉加载的数据列表*/
				.news-list li{
					padding: 16px;
					border-bottom: 1px solid #eee;
				}
				.news-list .new-content{
					font-size: 14px;
					margin-top: 6px;
					margin-left: 10px;
					color: #666;
				}
			</style>
	
	
</head>
<body>
	<div>
		
		
		
		<!--标题-->
				<a href="../../index.html">
					<div class="header">
						<img src="../../images/advanceSale/1.jpg"/>
					</div>
				</a>
				<!--下拉刷新回调的提示-->
				<p id="downloadTip" class="download-tip">更新成功</p>
				<!--滑动区域-->
				<div id="mescroll" class="mescroll" style="height: auto;">
					<!--模拟的内容-->
					<!-- <img src="../../images/advanceSale/1.jpg"/> -->
					<!-- <img src="img/zhihu3.jpg"/>
					<img src="img/zhihu4.jpg"/> -->
					<!--展示上拉加载的数据列表-->
					<ul id="newsList" class="news-list">
						<!--<li>
							<p>【话题1】标题标题标题标题</p>
							<p class="new-content">内容内容内容内容内容内容内容内容内容</p>
						</li>-->
					</ul>
				</div>
		
				<!--底部-->
				<!-- <a href="../index.html"><div class="footer"></div></a> -->
		
	</div>
<script src="../../static/option/mescroll-option.js"></script>
<script src="../../static/option/mescroll.min.js"></script>
<link rel="stylesheet" href="../../static/option/mescroll-option.css" />
<link rel="stylesheet" href="../../static/option/mescroll.min.css" />
</body>
</html>

js

var url = getURL();
$(function() {


	var pager = {}; //分页
	var totalPage; //总页码




		//创建MeScroll对象
		var mescroll = initMeScroll("mescroll", {
			down: {
				auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				callback: downCallback, //下拉刷新的回调
			},
			up: {
				auto: true, //初始化完毕,是否自动触发上拉加载的回调
				isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
				isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
				callback: upCallback, //上拉加载的回调
				toTop: { //配置回到顶部按钮
					src: "../../static/option/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
					//offset : 1000
				}
			}
		});

		/*下拉刷新的回调 */
		function downCallback() {
			//加载轮播数据..
			//...
			//加载列表数
			
			mui.ajax(URL, {
				data: JSON.stringify({
					page: 1,
					limit: "20",
				}),
				dataType: 'json',
				type: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
				success: function(data) {
					
					var returnData = data.data;
		
					var str = '';
					
					var totalPage=returnData.pageCount/20;
					
					console.log(totalPage)
					mescroll.endByPage(returnData.customApplyList.length, 2);
					for (var i = 0; i < returnData.customApplyList.length; i++) {
			
						var state, clsName;
						//data[idx].tpa_status == '0' ? state = '上架' : state = '下架';
						if (returnData.customApplyList[i].status == '0') {
							state = "待处理"
						} else if (returnData.customApplyList[i].status == '1') {
							state = "已处理";
						}
			
						str += '<li class="mui-table-view-cell mui-media">' +
							'				        <a href="javascript:;">' +
							'				           <p class="mui-media-object mui-pull-right">' + state + '</p>' +
							'				            <div class="mui-media-body">' +
							'				                <p class=\'mui-ellipsis\'>' + returnData.customApplyList[i].apply_time + '</p>' +
							'				                <p class=\'mui-ellipsis\'>企业名称：' + returnData.customApplyList[i].company_name + '</p>' +
							'				                <p class=\'mui-ellipsis\'>联系人' + returnData.customApplyList[i].contact_people + '</p>' +
							'				                <p class=\'mui-ellipsis\'>联系电话：' + returnData.customApplyList[i].telephone + '</p>' +
							'				            </div>' +
							'				        </a>' +
							'	   </li>';
			
					}
			
					$("#newsList").append(str);
					
					mescroll.endSuccess();
					//设置列表数据
					//setListData(data, false);
					//显示提示
					$("#downloadTip").css("top", "3.7rem");
					setTimeout(function() {
						$("#downloadTip").css("top", "1.6rem");
					}, 2000);
		
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
					mescroll.endErr();
				}
			})
		}

		/*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
		function upCallback(page) {
			
			getData(page)
			//联网加载数据
		}

	//这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax
	function getData(params) {
		mui.ajax(URL, {
			data: JSON.stringify({
				page: params.num,
				limit: "20",
			}),
			dataType: 'json',
			type: 'post',
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
				//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
				var returnData = data.data;
				var str = '';
				
				var totalPage=returnData.pageCount/20;
				
				console.log(totalPage)
				mescroll.endByPage(returnData.customApplyList.length, 2);
				for (var i = 0; i < returnData.customApplyList.length; i++) {

					var state, clsName;
					//data[idx].tpa_status == '0' ? state = '上架' : state = '下架';
					if (returnData.customApplyList[i].status == '0') {
						state = "待处理"
					} else if (returnData.customApplyList[i].status == '1') {
						state = "已处理";
					}

					str += '<li class="mui-table-view-cell mui-media">' +
						'				        <a href="javascript:;">' +
						'				           <p class="mui-media-object mui-pull-right">' + state + '</p>' +
						'				            <div class="mui-media-body">' +
						'				                <p class=\'mui-ellipsis\'>' + returnData.customApplyList[i].apply_time + '</p>' +
						'				                <p class=\'mui-ellipsis\'>企业名称：' + returnData.customApplyList[i].company_name + '</p>' +
						'				                <p class=\'mui-ellipsis\'>联系人' + returnData.customApplyList[i].contact_people + '</p>' +
						'				                <p class=\'mui-ellipsis\'>联系电话：' + returnData.customApplyList[i].telephone + '</p>' +
						'				            </div>' +
						'				        </a>' +
						'	   </li>';

				}

				$("#newsList").append(str)


			},
			error: function(xhr, type, errorThrown) {
				//异常处理；
				console.log(type);
				mescroll.endErr();
			}
		})
	}



})