<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
.mui-table-view li {
overflow: hidden;
margin: 1.25rem 3% 0;
border-radius: 0.21rem;
background-color: #FFFFFF;
}
.i-da {
background: url(../img/zhifu.png) no-repeat;
background-position: right 6% bottom 2.25rem;
background-size: 8.63rem 4.92rem;
}
.i-ed {
background: url(../img/daizhifu.png) no-repeat;
background-position: right 6% bottom 2.25rem;
background-size: 8.63rem 4.92rem;
}
.mui-table-view li a {
display: block;
height: 11.33rem;
}
.m_num {
height: 3.33rem;
padding-left: 6%;
color: #fff;
font-size: 0.92rem;
line-height: 3.33rem;
background: #f86442;
}
.i-ed .m_num {
background: #77b7ff;
}
.m_num strong {
font-size: 1.5rem;
}
.mui-table-view li dl {
padding-top: 1.08rem;
padding-left: 6%;
}
.mui-table-view li dl dt, .mui-table-view li dl dd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mui-table-view li dl dt {
padding-bottom: 0.83rem;
border-bottom: 1px solid #ececec;
font-size: 1.42rem;
line-height: 1.42rem;
color: #585858;
}
.mui-table-view li dd {
width: 100%;
padding-left: 7%;
color: #808080;
font-size: 1.17rem;
line-height: 1.6;
}
.add {
margin-top: 0.32rem;
background: url(../img/tuoyuan.png) left center no-repeat;
background-size: 1.17rem 1.17rem;
}
.time {
background: url(../img/yuan.png) left center no-repeat;
background-size: 1.17rem 1.17rem;
}
.time span:nth-child(1),
.time span:nth-child(2) {
padding-right: 5%;
}
</style>
</head>
<body>
<div class="mui-content">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">缴费记录</h1>
</header>
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">临停</a>
<a class="mui-control-item" href="#item2">月卡</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul id="tabcon" class="mui-table-view" style="background: #F0EFF4;">
<li class="i-da">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
<li class="i-ed">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
<li class="i-da">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
</ul>
</div>
<div id="item2" class="mui-slider-item mui-control-content">
<ul id="tabcon" class="mui-table-view" style="background: #F0EFF4;">
<li class="i-da">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
<li class="i-ed">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
<li class="i-da">
<a href="#">
<div class="m_num">
¥
<strong>5</strong>
</div>
<dl>
<dt>闽D88888</dt>
<dd class="add">国际山庄停车车车场</dd>
<dd class="time">
<span>07-01 14:00:00</span>
<span>至</span>
<span>07-02 15:00:00</span>
</dd>
</dl>
</a>
</li>
</ul>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<script src="../js/jquery-1.12.3.js"></script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).resize(getWidth);
function getWidth() {
var windowWidth = $(window).width();
if(windowWidth >= 640) {
$("html").css({
'font-size' : '24px'
})
}
else {
$("html").css({
'font-size' : 24 / 640 * windowWidth + 'px'
})
}
}getWidth();
})
// 作为全站都需要使用的JS，需要提取到JS文件当中，不要书写在HTML当中
// 为了防止全局作用域被污染，会使用$(function(){}) 或匿名函数进行封装
</script>
<script type="text/javascript">
mui.init({
swipeBack: false,
pullRefresh: {
container: '#refreshContainer',
down: {
height: 50,
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('#tabcon');
var cells = document.body.querySelectorAll('#tabcon li');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = '#tabcon li';
li.innerHTML = '<a href="#"><div class="m_num">¥<strong>5</strong></div><dl><dt>闽D88888</dt><dd class="add">国际山庄停车车车场</dd><dd class="time"><span>07-01 14:00:00</span><span>至</span><span>07-02 15:00:00</span></dd></dl></a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#refreshContainer').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('#tabcon');
var cells = document.body.querySelectorAll('#tabcon li');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = '#tabcon li';
li.innerHTML = '<a href="#"><div class="m_num">¥<strong>5</strong></div><dl><dt>闽D88888</dt><dd class="add">国际山庄停车车车场</dd><dd class="time"><span>07-01 14:00:00</span><span>至</span><span>07-02 15:00:00</span></dd></dl></a>';;
table.appendChild(li);
}
}, 1000);
}
</script>
</body> </html>
1***@qq.com (作者)
请问就是有没有tab切换+下拉刷新的例子 选项卡+下拉刷新的 没有mui-bar这个
2016-10-11 15:14