mui单页面实现下拉刷新和上拉加载更多

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

老毕姥爷

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

阅读量4.7k

点赞数

分类专栏：混合app

本文链接：https://blog.csdn.net/qq_38387487/article/details/79611415

版权

混合app 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html> 
 
 <html> 
 
 <head> 
 
 <meta charset= 
 "utf-8" 
 >    
 
 <meta name= 
 "viewport"  
 content= 
 "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"  
 /> 
 
 <title>mui上拉刷新下拉加载demo--封装</title> 
 
 <script src= 
 "js/mui.min.js" 
 ></script> 
 
 <link href= 
 "css/mui.min.css"  
 rel= 
 "stylesheet" 
 /> 
 
 <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  
 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.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
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
mui单页面实现下拉刷新和上拉加载更多

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scala
复制链接

扫一扫