当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

mui 上拉加载 实现分页加载功能

热淘网2个月前 (03-25)源码技巧72

分页功能(上拉加载):

1、引入需要的css、js文件

<link href="static/css/mui.css" rel="stylesheet" />
<!-- js -->
<script src="static/js/jquery-3.2.0.js"></script>
<script src="static/js/mui.min.js"></script>

2、dom结构

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

3、动态获取数据,实现上拉加载

<script>
(function(){    
    var lastPage;  //总共页数    
    var currPage=1; //当前页码
  var counter=1; //计数器
    function getList(){
        var result="";
        $.ajax({
          url:'http://www.aaa.com/api/test/refreshPage?page='+counter,  //api
          type:'get',
          dataType:"json",
          timeout:10000,
          data:{},
            error:function(data){
              console.log("error")
            },
            success:function(res){
                lastPage = res.data.last_page;
                currPage = res.data.current_page;
                var data = res.data.data;

                $.each(data,function(i,value){
                    result += '<div class="order_item">' +'<div class="order_title">' +'<div class="order_number">订单编号:'+value.order_no+'</div>'                      +'<div class="order_date">'+value.created_at+'</div>'                    +'</div>'                    +'<div class="order_msg">'                      +'<div class="order_img">'                        +'<img src="'+upload_path+value.image_url+'" />'                      +'</div>'                      +'<div class="order_info">'                        +'<p class="info_txt info_title">'+value.goods_name+'</p>'                        +'<p class="info_txt">'+value.machine_name+'('+value.machine_no+')</p>'                        +'<p class="info_txt">订单状态:<span class="success_status">'+value.order_status+'</span></p>'                      +'</div>'                      +'<div class="order_price">'+value.amount+'元</div>'                    +'</div>'                   +'</div>';
                    jQuery(result).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
                },
            })
        }
    }
    //上拉加载
    mui.init({
        pullRefresh : {
            container:'#pullrefresh',//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
            up : {
            height:50,//可选.默认50.触发上拉加载拖动距离
            auto:true,//可选,默认false.自动上拉加载一次
            contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
            contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
            callback :pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
            }
        }
    });

    function pullupRefresh(){
        setTimeout(function(){
        getList();
        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++counter>lastPage));
        },1500)
    }
})();

</script>

注意:

mui中的pullupRefresh会阻止onclick触发事件及a标签链接,可以通过下面方式进行触发事件及跳转:

result += '<div class="item_wrap clearfix" data-url="http://www.baidu.com" id='+value.id+' >'
          + '<div class="id_wrap" >'+value.id+'</div>'
          + '<div class="cont_wrap" >'
                + '<div class="order_no_wrap" >'+value.order_no+'</div>'
                + '<div class="data_wrap" >'+value.created_at+'</div>'
          + '</div>'
        + '</div>';
$(function() {
    //mui触屏点击
    $("#pullrefresh").on('tap', '.item_wrap', function(event) {
        var url = $(this).attr("data-url");
        location.href = url;
     });
})



扫描二维码推送至手机访问。

版权声明:本文由网站标题发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1547.html

分享给朋友:

相关文章

友情链接代码

友情链接代码

[code]˂!--{eval $imglink .= "\n";}--˃˂!--{eval $txtlink .= "".$value[name]."\n";}--˃$imglink$txtlink...

当前位置:首页>>资讯"去掉这里的"资讯"!

当前位置:首页>>资讯"去掉这里的"资讯"!

步骤①根目录下找到 news.php找到 [list=1][*]$guidearr[] = array('url' =˃ geturl('action/news'),'name' =˃ $lang['...

通用支付宝960宽滑动banner首页幻灯片代码

通用支付宝960宽滑动banner首页幻灯片代码

[img=500,0]http://mushou.5d6d.com/attachment.php?aid=4119&k=96f1966d23f65c07ae37ee5a67fc1057&t=12821...

过滤ss模块调用乱七八糟的字符

过滤ss模块调用乱七八糟的字符

[code]function htmldecode($str){if(empty($str)) return;if($str=="") return $str;$str=dhtmlspecialcha...

解决企业版安装后无法生成静态页面的方案

解决企业版安装后无法生成静态页面的方案

由于不小心安装完成后可能不能成生静态页面;解决方法:在系统设置中的SQL工具命令下面运行:[code]update dede_arctype set isdefault=1[/code]就行了如果想让...

织梦导航去掉简体中文办法

织梦导航去掉简体中文办法

[code]{dede:field name='position' runphp='yes'} if( @me == ""){ @m...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。