辗转用梅做了两个项目,空下来把梅上拉加载更多,下拉刷新数据做了一个简单的封装,希望可以帮助到需要的朋友
演示项目的结构
直接贴代码了
index . html
梅上拉刷新下拉加载都这里了,两个方法搞定
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt; title>梅上拉刷新下拉加载演示——封装& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/js/mui.min.js "祝辞& lt;/script>
& lt;链接的href=" https://www.yisu.com/zixun/css/mui.min.css " rel=巴獠縩ofollow”rel="样式表"/比;
& lt;风格类型=" text/css "比;
李{
高度:30 px;
行高:30 px;
字体大小:14 px;
颜色:# bbb;
indent: 4%;
边界底部:1 px固体currentColor;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——下拉刷新容器——比;
& lt; div id=" refreshContainer " class=" mui-content mui-scroll-wrapper”比;
& lt; div类=癿ui-scroll”比;
& lt; !——数据列表——比;
& lt; ul类=" mui-table-view mui-table-view-chevron " id=傲斜怼北?
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript charset=皍tf - 8”比;
var寻呼机={};//分页
var totalPage;//总页码
pullRefresh(寻呼机);//启用上拉下拉
函数pullRefresh () {
梅(“# refreshContainer”) .pullRefresh ({
:{
contentrefresh:“正在加载…”,//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:“没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
回调函数:函数(){//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
window.setTimeout(函数(){
getData(寻呼机);
},500);
}
},
:{
高度:50,//可选,默认50。触发下拉刷新拖动距离,
汽车:真的,//可选,默认假。首次加载自动下拉刷新一次
contentdown:“下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover:“释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh:“正在刷新…”,//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
回调函数:函数(){//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
window.setTimeout(函数(){
寻呼机[‘尺寸’]=3;//条数
寻呼机['页']=1;//页码//刷新要先清空父节点里面的子节点
var f=. getelementbyid(“列表”);
var蔡尔兹=f.childNodes;
我(var=蔡尔兹。长度- 1;我在=0;我(){
f.removeChild(孩子的[我]);
}
getData(寻呼机);
},500);
}
}
}）
}//这个方法是负责向接口请求数据的,你可以选择你喜欢的方式,我这里是直接用的mui.ajax
函数getData (params) {
mui.ajax(“/文章/getArticlePage”{
数据:{
“头”:{“操作系统”:“wap”,“应用”:“xxxx”、“版本”:1.0},
“数据”:参数
},
数据类型:json,
类型:“文章”,
标题:{“内容类型”:“application/json”},
成功:功能(数据){
梅(# refreshContainer) .pullRefresh () .endPullupToRefresh(真正的);//下面这坨都是在拼dom你可以用jquery或者是你所熟悉的角,vue双向绑定
var returnData=https://www.yisu.com/zixun/data.data;
var元素=. getelementbyid(“列表”);
var对位;
var节点;
(var=0;i
& lt;/html>
