<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>mui-轮播-刷新</title>
</head>
<link rel="stylesheet" href="css/mui.min.css" />
<script src="js/jquery.js"></script>
<script src="js/mui.js"></script>
<style>
a,body,div,html,img,li,span,ul{margin:0;padding:0}body{background-color:#fff;font-size:1pc;font-family:Microsoft YaHei}
.top_box img{width:100%;height:92.5px}body{width:100%;height:100%}html{width:100%;height:100%}.spec_content{margin:0 auto;margin-top:9px;width:92%;height:70px;height:84px;font-size:16px}.bancontent_box{width:100%;border-top:1px solid #E7E7E7}.bancontent{margin:0 auto;width:92%;height:93px;font-size:16px}.bancontent_left_content{display:block;overflow:hidden;margin-top:12px;width:68%;height:41px;text-overflow:ellipsis}.bancontent_img>div{float:right;margin-top:-45px;width:28%;height:72px}#wrapper{position:absolute;display:inline-block;width:100%;height:97%}
</style>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<!--顶部轮播图片-->
<div class="top_box">
<!--官方写法 页面上会显示一个 开关按钮-->
<!--<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</div>-->
<!--定时轮播-->
<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="img/1.jpg"> -->
<div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<!-- <img src="img/1.jpg"> -->
<div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<!-- <img src="img/4.jpg"> -->
<div style="width: 100%; height: 150px;background: red;text-align: center;line-height: 150px;">第二张</div>
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<!-- <img src="img/1.jpg"> -->
<div style="width: 100%; height: 150px;background: blue;text-align: center;line-height: 150px;">第三张</div>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<!-- <img src="img/4.jpg"> -->
<div style="width: 100%; height: 150px;background: rebeccapurple;text-align: center;line-height: 150px;">第一张</div>
</a>
</div>
</div>
<!--图片下小圆点显示-->
<div class="mui-slider-indicator">
<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>
<div class="spec_content">
<span>
<g>专题导读</g>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
</div>
<div class='bancontent_box'>
<!--公共的-->
<div class='bancontent'>
<div class='bancontent_left_content'>
<span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
</div>
<span class="bancontent_img">
<div></div>
</span>
<span class="bancontent_from">啦啦啦1</span>
<span class="bancontent_time">2017-08-04</span>
</div>
<div class='bancontent'>
<div class='bancontent_left_content'>
<span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
</div>
<span class="bancontent_img">
<div></div>
</span>
<span class="bancontent_from">啦啦啦2</span>
<span class="bancontent_time">2017-08-04</span>
</div>
<div class='bancontent'>
<div class='bancontent_left_content'>
<span class='bancontent_left_content_font'>过去几年,数据治理和数据完整性的问题成为监管部门执法行动中的突出问题。监管部门审查了数千页的原始提交数据以及</span>
</div>
<span class="bancontent_img">
<div></div>
</span>
<span class="bancontent_from">啦啦啦3</span>
<span class="bancontent_time">2017-08-04</span>
</div>
</div>
</div>
</div>
</body>
<script>
// $(function(){
//初始化--有好多参数（可以参考 官方api "http://dev.dcloud.net.cn/mui/pulldown/"）
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {//下拉
// auto:true,//可选,默认false.自动上拉加载一次
contentrefresh: '正在加载下拉...',
callback: pulldownRefresh,
},
up: {//上拉
auto:false,//可选,默认false.自动上拉加载一次
contentrefresh: '正在加载上拉...',
callback: pullupRefresh,
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
}
}
});
//下拉刷新具体业务实现
function pulldownRefresh() {
setTimeout(function() {
//do something
mui('#pullrefresh').pullRefresh().endPulldownToRefresh((true)); //参数为true代表没有更多数据了。
}, 1500);
}
//上拉加载具体业务实现
function pullupRefresh() {
setTimeout(function() {
//do something
mui('#pullrefresh').pullRefresh().endPullupToRefresh((true)); //参数为true代表没有更多数据了。
}, 1500);
}
//注意 点击事件一定要 按照mui的方法写 如果写click会不生效
mui(".bancontent").on("tap","div span",foo_1);//点击事件
function foo_1(){
alert("点击列表生效了")
}
//----------------------图片轮播-------------------------------------
//进入页面自动轮播 简单明了
var slider = mui("#slider");
var gallery = mui('.mui-slider');
gallery.slider({
interval:1000//自动轮播周期，若为0则不自动播放，默认为0；
});
// });
</script>
</html>
