mui 上下拉刷新pullRefresh

最新推荐文章于 2024-06-20 16:36:13 发布

高林雨露

最新推荐文章于 2024-06-20 16:36:13 发布

阅读量1.7k

点赞数

分类专栏： html5 android 文章标签： pullRefresh

本文链接：https://blog.csdn.net/ck3345143/article/details/107846105

版权

android 同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

mui 上下拉刷新pullRefresh，例子

<!doctype html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<style type="text/css">
			li {
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #bbb;
				text-indent: 4%;
				border-bottom: 1px solid currentColor;
			}
		</style>
	</head>
	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="list">

				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		var dataJson = {
			"header": {
				"ret": "S"
			},
			"data":[
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				},
				{
					"article_id":"12333333",
					"article_img":["images/ad2.jpg","images/ad3.jpg"],
					"article_tile":"fdsfsdffsdgsdgdf",
					"article_content":"fdsfsdffsdgsdgdf",
					"article_summart":"",
					"article_ot":"2020-08-05 12:12:12",
					"article_reader":12,
					"article_display":"1"
					
				}
			],
			"ext":"890"
		}
		var pager = {}; //分页
		var totalPage; //总页码
		pullRefresh(pager); //启用上拉下拉 
		function pullRefresh() {
			mui("#refreshContainer").pullRefresh({
				up: {
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						window.setTimeout(function() {
							getData(pager);
						}, 500);
					}
				},
				down: {
					height: 50, //可选,默认50.触发下拉刷新拖动距离,
					auto: true, //可选,默认false.首次加载自动下拉刷新一次
					contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
					callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						window.setTimeout(function() {
							pager['size'] = 3; //条数
							pager['page'] = 1; //页码      
							//刷新要先清空父节点里面的子节点
							var f = document.getElementById("list");
							var childs = f.childNodes;
							for (var i = childs.length - 1; i >= 0; i--) {
								f.removeChild(childs[i]);
							}
							getData(pager);
						}, 500);
					}
				}
			})
		}
		//这个方法是负责向接口请求数据的，你可以选择你喜欢的方式，我这里是直接用的mui.ajax
		function getData(params) {
			mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			//下面这坨都是在拼dom 你可以用jquery 或者是你所熟悉的angular,vue双向绑定
			var returnData = dataJson.data;
			var element = document.getElementById("list");
			var para;
			var node;
			for (var i = 0; i < returnData.length; i++) {
				para = document.createElement("li");
				node = document.createTextNode(returnData[i].article_tile)
				para.appendChild(node);
				element.appendChild(para);
			}
			
			//这里很重要，这里获取页码 公式：总条数/每页显示条数 （这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式）
			totalPage = dataJson.ext % pager.size != 0 ? parseInt(dataJson.ext / pager.size) + 1 : dataJson.ext / pager.size;
			if (totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
			} else {
				pager.page++;
				mui('#refreshContainer').pullRefresh().refresh(true);
			}
		}
		function getData2(params) {
			mui.ajax("/article/getArticlePage", {
				data: {
					"header": {
						"os": "wap",
						"app": "xxxx",
						"ver": 1.0
					},
					"data": params
				},
				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 element = document.getElementById("list");
					var para;
					var node;
					for (var i = 0; i < returnData.length; i++) {
						para = document.createElement("li");
						node = document.createTextNode(returnData[i].article_title)
						para.appendChild(node);
						element.appendChild(para);
					}

					//这里很重要，这里获取页码 公式：总条数/每页显示条数 （这里的处理是根据接口返回数据来做的处理 最下面有接口返回数据的格式）
					totalPage = data.ext % pager.size != 0 ? parseInt(data.ext / pager.size) + 1 : data.ext / pager.size;
					if (totalPage == pager.page) { //总页码等于当前页码，停止上拉下拉
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
					} else {
						pager.page++;
						mui('#refreshContainer').pullRefresh().refresh(true);
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(type);
				}
			})
		}
	</script>
</html>

高林雨露

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
mui 上下拉刷新pullRefresh

mui 上下拉刷新pullRefresh，例子<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalabl.
复制链接

扫一扫

专栏目录