wisdom-union
/
ListTemplate9.html

<!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>工会简介</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/list9.css">
	<link rel="stylesheet" href="css/css.css">
    <script type="text/javascript" charset="utf-8">
        var countDown = 0;//下拉次数
    var countUp = 0;//上拉次数
      	 mui.init
      	    ({
      	         swipeBack: false,
                pullRefresh: {
                container: "#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等

                up: {//上拉加载
                    height: 5,//可选.默认50.触发上拉加载拖动距离
                    auto: false,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: async function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                        if (countUp >= 3) {
                            this.endPullupToRefresh(true);//没有数据
                            return;
                        }
                        await sleep(1000);
                        /*每次加载动态的添加一个li*/
                        $(".mui-table-view").append($("<li class='mui-table-view-cell'><a class='elli_2' href='${a.url}' title='${a.title}' target='_blank'>" + new Date() + "</a></li>"));
                        this.endPullupToRefresh(false)
                        countUp++;
                    }
                }
            }
      	    });
    </script>
</head>
<body>

<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
  <!-- 菜单容器 -->

  <aside class="mui-off-canvas-right">
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <ul class="menu-right" id="main">
        	<li><a href="http://www.baidu.com"><i class="mui-icon mui-icon-home"></i>首页</a></li>
        	<li><a href="http://www.baidu.com"><i class="mui-icon mui-icon-star"></i>关于我们</a></li>
        	<li><a href="http://www.baidu.com"><img src="images/ghicon.png"></i>走进工会</a></li>
        	<li><a href="http://www.baidu.com"><i class="mui-icon mui-icon-pengyouquan"></i>工会动态</a></li>
        	<li><a href=""><img src="images/dhicon.png"></i>党建工作</a></li>
        	<li><a href=""><img src="images/zwicon.png"></i>政务公开</a></li>
        	<li><a href=""><i class="mui-icon mui-icon-map"></i>工会地址</a></li>
        	<li><a href=""><i class="mui-icon mui-icon-phone"></i>联系我们</a></li>
        </ul>
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <!-- 导航条开始 -->
      <div class="mui-row menu">
      	<div class="mui-col-sm-10 mui-col-xs-10">
      		<form class="mui-input-group">
      			<input type="text" placeholder="关键词搜索">
      			<i class="mui-icon mui-icon-search"></i>
      		</form>
      	</div>
      	<div class="mui-col-sm-2 mui-col-xs-2 "><i id="offCanvasShow" class="mui-icon mui-icon-bars mui-icon mui-action-menu mui-icon-bars"></i></div>
      </div>
      <!-- 导航条结束 -->
    </header>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 轮播图开始 -->
        <div id="slider" class="mui-slider">
        	<div class="mui-slider-group mui-slider-loop">
        		<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        		<div class="mui-slider-item mui-slider-item-duplicate">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        		<div class="mui-slider-item">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        		<div class="mui-slider-item">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        		<div class="mui-slider-item">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        		<div class="mui-slider-item">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        		<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        		<div class="mui-slider-item mui-slider-item-duplicate">
        			<a href="#">
        				<img src="images/01.jpg">
        				<p class="mui-slider-title">不忘初心，牢记使命</p>
        			</a>
        		</div>
        	</div>
        	<div class="mui-slider-indicator mui-text-right">
        		<div class="mui-indicator mui-active"></div>
        		<div class="mui-indicator"></div>
        		<div class="mui-indicator"></div>
        		<div class="mui-indicator"></div>
        	</div>
        </div>
        <!-- 轮播图结束 -->

        <!-- 内容列表开始 -->
        <div class="mui-content">
        	<div class="mui-row">
        		<div class="mui-col-sm-6 mui-col-xs-6">
        			<li class="mui-table-view-cell">
        				<a href="#">
        					<img src="images/dj.png" />
        					党建工作
        				</a>
        			</li>
        		</div>
        		<div class="mui-col-sm-6 mui-col-xs-6">
        			<li class="mui-table-view-cell">
        				<a href="#">
        					<img src="images/zw.png" />
        					政务公开
        				</a>
        			</li>
        		</div>
        	</div>
        </div>
        <!-- 列表开始 -->
        <ul class="mui-table-view">
        	<p class="title"><span>工会动态</span><a href="#">更多&gt;&gt;</a></p>
        	<li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
        	<li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
        	<li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
            <li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
            <li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
            <li class="mui-table-view-cell">【蒙工网视】第28期——区总开展“不忘初心，牢记使命”主题党日活动</li>
        </ul>
        <!-- 列表结束 -->
        <!-- 内容列表结束 -->
        ...
      </div>
    </div>
  </div>
</div>

</body>
</html>
<script>
var slider = mui("#slider");
slider.slider({
    interval: 5000
});
//显示隐藏
mui('.mui-off-canvas-wrap').offCanvas().isShown('hidden');
//右侧菜单点击时可以隐藏和显示
document.getElementById('offCanvasShow').addEventListener('tap',function()
{
    mui('.mui-off-canvas-wrap').offCanvas('show');
});
//右侧菜单超链接不能点击问题
mui('body').on('tap','a',function(){document.location.href=this.href;});
//IOS下不能上下拖拽问题
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.5
});
//上拉刷新问题

//模拟线程等待,ms:单位毫秒
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
</script>