mui框架的地步选项卡公用加载对应页面demo

参考mui官网的下拉刷新地址:http://dev.dcloud.net.cn/mui/pulldown/

在HBuilder上新建:移动App--选择模板mui项目--

页面body里----主体mbody----区域滚动mScroll里---列表内容mList(注:直接敲出来的跟官网有所出入)或直接在官网粘贴(放主体里)

<!--主体 -->
<div class="mui-content">
        
    </div>

 

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">
      
    </ul>
  </div>
</div>

js:

通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数,如下:

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
//下拉刷新
    down : {
      height:50,//可选,默认50.触发下拉刷新拖动距离,
      auto: true,//可选,默认false.首次加载自动下拉刷新一次
      contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
      contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
      contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
//下拉加载
up : {
      height:50,//可选.默认50.触发上拉加载拖动距离
      auto:true,//可选,默认false.自动上拉加载一次
      contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
      contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
      callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
    }
  }
});

回调函数:操作ajax返回数据

完整案例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>mui的下拉刷新上拉加载</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="../css/mui.min.css">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
            
            .title {
                padding: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
                background-color: #fff;
            }
        </style>
    </head>

    <body>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">
                    这是subNView模式选项卡中的第1个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
                </div>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 1</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 2</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 3</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 4</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 5</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 6</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 7</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 8</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 9</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 10</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 11</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 12</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 13</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 14</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 15</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 16</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 17</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 18</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 19</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate-right">Item 20</a>
                    </li>
                </ul>
            </div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script>
            mui.init({
                swipeBack: false,
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        style:'circle',
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    var table = document.body.querySelector('.mui-table-view');//获取dom节点//获取选择器
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    for(var i = cells.length, len = i + 3; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                        //下拉刷新,新纪录插到最前面;
                        table.insertBefore(li, table.firstChild);
                    }
            //下拉刷新结束 mui(
'#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed mui.toast('下拉刷新成功'); }, 1000); } var count = 0; /** * 上拉加载具体业务实现 */ function pullupRefresh() { setTimeout(function() { mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。 var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); for(var i = cells.length, len = i + 20; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; table.appendChild(li); } }, 1000); } </script> </body> </html>

 

posted @ 2019-03-10 21:20  小凢  阅读(1011)  评论(0编辑  收藏  举报