mui上拉加载功能实例详解
程序员文章站
2022-08-27 23:28:30
最近在做移动端的项目,用到了mui的上拉加载,整理如下:
1、需要引入的css、js
最近在做移动端的项目,用到了mui的上拉加载,整理如下:
1、需要引入的css、js
<link rel="stylesheet" href="common/mui/css/mui.min.css" rel="external nofollow" > <script src="js/jquery-3.2.0.min.js"></script> <script src="common/mui/js/mui.min.js"></script>
2、静态页的dom结构
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" class="maincon"> <div class="mui-scroll"> <div class="mui-table-view mui-table-view-chevron"> </div> </div> </div>
3、静态页面 js对应的代码
<script type="text/javascript"> (function(){ //上拉加载下拉刷新 mui.init({ pullrefresh: { container: '#pullrefresh', up: { contentrefresh: '正在加载...', callback: pulluprefresh } } }); //加载更多 var datanum=12;//获取数据总数 var pagesize=3;//每页显示条数 var counter=1;//计数器 var pagestart=0;//开始数据条数 getdata(pagestart,pagesize); function getdata(pagestart,pagesize){ //显示数不足每页显示条数 if(datanum-pagestart<pagesize){ pagesize=datanum-pagestart; data(pagestart,pagesize); console.log("显示数不足每页显示条数"); } //显示隐藏加载更多 else if(pagestart+pagesize>=datanum){ data(pagestart,pagesize); console.log("没有更多数据了"); //没有更多数据了 }else{ data(pagestart,pagesize); console.log("显示datanum"+datanum+"pagesize"+pagesize+"pagestart"+pagestart); //显示 } } function data(pagestart,pagesize){ //业务 var result=""; for(var i=pagestart;i<(pagestart+pagesize);i++){ result+='<div class="goode-msg">'+ '<div class="goods">'+ '<p class="goode-name">呜呜呜呜</p>'+ '<span class="goods-price">价格:10元</span>'+ '<span class="icon-golden"></span>'+ '<span class="goods-golden">送1111</span>'+ '</div>'+ '<div class="buycon">'+ '<a class="buybtn buybtnabled" onclick="shop(5)">立即购买</a>'+ '</div>'+ '</div>' } console.log(jquery); jquery(result).insertbefore('#pullrefresh .mui-scroll .mui-table-view'); } /** * 上拉加载具体业务实现 */ function pulluprefresh() { settimeout(function() { var flag=counter++<(datanum/pagesize) console.log(datanum/pagesize); mui('#pullrefresh').pullrefresh().endpulluptorefresh((!flag)); //参数为true代表没有更多数据了。 var scroll = document.body.queryselector('.mui-scroll .mui-table-view'); var item = document.body.queryselectorall('.goode-msg'); console.log(counter); if(flag){ console.log(counter); pagestart=counter*pagesize; data(pagestart,pagesize); } }, 1500); } })(); </script>
4、与服务端联调时 js做了改动,如下:
//加载更多 var pagesize = 15;//每页显示条数 var counter = 1;//计数器 var pagestart = 0;//开始数据条数 var flag=true; data(); function data() { //业务 var result = ""; $.ajax({ type: 'post', url: '/xxx/xxx', async: false, datatype: "json", data: {page: counter}, success: function (data) { flag=data[0].dd==null||data[0].dd==undefined||data[0].dd==''; //判断是否有返回值 当没有返回值的时候就为空,则代表没有更多数据了 console.log(flag); if(flag==false){ counter++; } $.each(data[0].dd, function (i, value) { result += '<div class="goode-msg">' + '<div class="goods">' + '<input type="hidden" class="id" value="'+value.id+'">' + '<input type="hidden" class="aa" value="'+value.aa+'">' + '<p class="goode-name" id="title'+value.id+'">'+value.title+'</p>' + '<input type="hidden" class="goods-price-cent" value="'+value.price.cent/100+'">' + '<span class="goods-price">价格:<b id="price'+value.id+'">'+value.price.cent/100+'</b>元</span>' + '<span class="icon-golden"></span>' + '<span class="goods-golden">送<b id="ss'+value.id+'">'+value.ss+'</b>ss</span>' + '</div>' + '<div class="buycon">' + '<a class="buybtn buybtnabled" onclick="shop('+i+')">立即购买</a>' + '</div>' + '</div>' }); jquery(result).insertbefore('#pullrefresh .mui-scroll .mui-table-view'); } } ); } /** * 上拉加载具体业务实现 */ function pulluprefresh() { settimeout(function () { mui('#pullrefresh').pullrefresh().endpulluptorefresh((flag)); //参数为true代表没有更多数据了。 data(); }, 1500); } })();
5、踩的坑
注意:一定要先引入jquery、mui.js否则 js代码会不识别mui。
在jquery中,如果要给动态生成的节点绑定事件,以前要用live,现在用delegate或者on,原理是利用冒泡实现事件委托,也就是给生成节点的父节点预先绑定事件。
以上所述是小编给大家介绍的mui上拉加载功能实例详解,希望对大家有所帮助
上一篇: 如何禁止浏览器使用后退按钮功能