还在用mui默认的pullRefresh插件？赶紧来看看我的future-pullrefresh.js

最新推荐文章于 2022-12-19 14:11:17 发布

独行侠_阿涛

最新推荐文章于 2022-12-19 14:11:17 发布

阅读量632

点赞数

分类专栏： # MUI 文章标签： mui-pullrefresh pullrefresh future-pullrefresh mui下拉插件

本文链接：https://blog.csdn.net/wltsysterm/article/details/93618222

版权

MUI 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

做移动端开发的人很多人都认识mui框架。但是mui框架的很多功能的封装其实还是存在很多瑕疵的。

扫地僧最为有感触的便是mui的下拉插件，是真的难用，不是一般的难用。

于是，我基于mui.js和阿里巴巴的图标库封装了一个历史上最好用的下拉插件。

先罗列下我封装的future-pullrefresh.js插件的优点：

1、0成本上手，简单api

2、已经在大公司项目应用了，经过了10000多用户的考验，无bug。

最后直接讲下怎么用吧：

1、插件截图：

2、使用：

用这个插件的同学，默认你们已经会用mui的下拉插件了。

使用方法，上述截图已经详细说明，再不懂的同学，直接看插件里头又详细解释，再不懂的qq找我，邮箱：3263138624@qq.com，实在不想动的，直接看下面我给的使用案例吧。

案例：

1、引入css

（iconfont系列css是阿里巴巴的图标库里下载下来的：https://www.iconfont.cn/）

		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/icons-extra.css" />

2、引入js

<script src="../../js/mui.js "></script>
<script type="text/javascript" src="../../js/plugin/future/future-pullrefresh.js"></script>

3、编写html代码：

   <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="my-container">
				</div>
			</div>
	</div>

4、业务js

（这边只讲解最简单future-pullrefresh.js的用法，但是也就只要这么用就满足99.99%的场景了）

mui.init({
    pullRefresh: futurePullRresh.init({id:"pullrefresh"}),
    swipeBack: true //启用右滑关闭功能
});

// 实现下拉刷新的接口
futurePullRresh.pulldownRefresh = function() {
    // 下拉刷新，重新设置从第一页开始
	pageNo = 1;
    // 清空容器数据
	document.getElementById("my-container").innerHTML = ""; 
    // 重新搜索捞取数据
	search();
}

// 实现上拉加载接口
futurePullRresh.pullupRefresh = function () {
	search();
}

var pageNo = 1;
var pageSize = 10;
/**
 * 搜索
 */
function search() {
	// 请求参数
	var queryData = {
			pageNo:pageNo,
			pageSize:pageSize
	};
	
	mui.ajax({
		url: "xxx",
		type: 'get',
		data: queryData,
		dataType: 'json',
		timeout: 10000,
		success: function(result) {
			plus.nativeUI.closeWaiting();
			
			var rows = result.data.row;
			// 设置数据加载情况，其中第一个参数表示捞回来的结果的数量，第二个参数表示当前的页面（必须从1开始），第三个参数表示每页的条数
			futurePullRresh.setHasMoreData(rows.length,pageNo,pageSize);
			
			// 页数自加1
			pageNo++;
			
			// 根据数据生成要渲染的html
			var html = fillOneNoteList(rows);
			document.getElementById("my-container").innerHTML = document.getElementById("my-container").innerHTML + html;
		},
		error: function(xhr, type, errorThrown) {
			plus.nativeUI.closeWaiting();
			mui.toast("开小差了！");
		},
		complete: function() {
			plus.nativeUI.closeWaiting();
		}
	});
}

至此，一个简单的demo就完成了。