今天做前端下拉刷新,要了我的老命
首先这个东西在浏览器上就可以测试,如果报错了那就是写的可能存在问题
其次,不需要引用乱七八糟的js和css 只需要有一个默认的mui.js mui.css 或者mui.min.js mui.min.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title></title> 7 <link href="css/mui.min.css" rel="stylesheet" /> 8 <script src="js/mui.min.js"></script> 9 10 </head> 11 <body> <!-- 下拉刷新容器 这两个div尽量固定,如果只是安卓使用的话无所谓,自己指定div也行 --> 12 <div id = "refresh" class="mui-content mui-scroll-wrapper"> 13 <div class="mui-scroll"> 14 33 15 </div> 16 </div> 17 <script type="text/javascript" charset="utf-8"> 18 mui.init({ 19 pullRefresh : { 20 container:"#refresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 21 down: {//下拉刷新 22 height: 50,//可选,默认50.触发下拉刷新拖动距离, 23 auto: false,//可选,默认false.首次加载自动下拉刷新一次 24 contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 25 contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 26 contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 27 callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； 28 getInfosrefresh() 29 } 30 }, 31 up: {//上拉加载 32 height: 50,//可选.默认50.触发上拉加载拖动距离 33 auto: false,//可选,默认false.自动上拉加载一次 34 contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 35 contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； 36 callback: async function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； 37 mui.alert("上拉加载了") 38 this.endPullupToRefresh(true);//没有数据 39 } 40 } 41 } 42 }); 43 function getInfosrefresh(){ 44 setTimeout(nextRefresh, 1000); 45 } 46 function nextRefresh (){ 47 mui('#refresh').pullRefresh().endPulldownToRefresh(); 48 } 49 </script> 50 </body> 51 </html>
要注意的地方:
1 下拉刷新容器 : 封装的原因,如果双系统使用的情况下,容器用默认的这个,就是现在的两个div,需要刷新的值写在里面的div里面,可以新建div,无所谓的 ,如果自己指定div,ios会有问题
2 高度 : 注意,写高度的时候如果写了px,会出现一个意外的问题,比如初始刷新之后不能刷新,或者上下不能滑动的bug 所以要注意不要写px,只需要写数字
3 callback属性 : 这是一个必选属性,同时不能直接写下面要调用的函数名字,需要写一个匿名函数(像现在这样),在匿名函数中调用新的函数,或者直接在匿名函数中写需要的数据请求,
不按照这样写,会报endPulldownToRefresh is not a function
或者 endPulldown is not a function 等类似的错误