不论是swiper还是mui的tab切换都存在高度问题。想来想去还是自己写
html
<div class="wrapper">
<div class="main">
<h4 id="title">
<span class="on">退款中</span>
<span>已退款</span>
</h4>
<div id="con">
<ul class="on">
<div class="f-j-sb p-10 b-g-white">
<div>
<p>A桶×3</p>
<p>B桶×3</p>
<p>C桶×3</p>
</div>
<div>
<p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
</div>
<div class="m-r-30 t-c">
<p>送水师傅上门收桶</p>
<p>合计:<span class="red">¥10.00</span></p>
<button class="quxiao">取消退桶</button>
</div>
</div>
<div class="f-j-sb p-10 b-g-white m-t-20">
<div>
<p>A桶×3</p>
<p>B桶×3</p>
<p>C桶×3</p>
</div>
<div>
<p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
</div>
<div class="m-r-30 t-c">
<a href="Qr-code.html"><p class="f-c-blue">展示二维码</p></a>
<p>合计:<span class="red">¥10.00</span></p>
<button class="quxiao">取消退桶</button>
</div>
</div>
</ul>
<ul>
<div class="f-j-sb p-10 b-g-white">
<div>
<p>A桶×3</p>
<p>B桶×3</p>
<p>C桶×3</p>
</div>
<div>
<p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
</div>
<div class="m-r-30 t-c">
<p>送水师傅上门收桶</p>
<p>退款成功</p>
<button class="quxiao">查看详情</button>
</div>
</div>
</ul>
</div>
</div>
</div>
css
.t-c{
text-align: center;
}
.red{
color: red;
font-size: 16px;
}
.quxiao {
height: 25px;
border: 1px solid #0090FF;
color: #0090FF;
line-height: 0.5;
margin-top: 10px;
}
.main {
width: 400px;
margin: 0 auto;
}
#title {
height: auto;
display: flex;
background: white;
padding: 10px 0;
font-weight: normal
}
#title span {
float: left;
width: 50%;
height: 30px;
margin-right: 5px;
color: #333;
background: white;
text-align: center;
cursor: pointer;
font-size: 17px
}
#title span.on {
color: #0090FF;
border-bottom: 2px solid #0090FF
}
#con {
height: auto;
}
#con ul {
display: none;
}
#con ul.on {
display: block;
}
#con ul li {
height: 24px;
line-height: 24px;
border-bottom: 1px dotted #ccc;
text-indent: 10px;
}
js
//tab
var oTitle = document.getElementById('title');
var aSpan = oTitle.getElementsByTagName('span');
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var i = 0;
for (i = 0; i < aSpan.length; i++) {
aSpan[i].index = aUl[i].index = i;
aSpan[i].onclick = function () {
for (i = 0; i < aSpan.length; i++) {
aSpan[i].className = '';
aUl[i].className = '';
}
this.className = 'on';
aUl[this.index].className = 'on';
}
}
起码不用担心高度问题。