mui 官方网站没有tab的API,在此记录一下。
mui的tab分为两种:1.点击的选项卡。 2.点击可拖动的选项卡;
1、点击的选项卡
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1">选项卡1</a>
<a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div class="mui-content-padded">
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell" v-for="item in items">
1111111111
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
222222222
</li>
</ul>
</div>
</div>
</div>
2.可点击拖动的tab,其实就是多了几个class而已。
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item mui-active" href="#item1">选项卡1</a>
<a class="mui-control-item" href="#item2">选项卡2</a>
</div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell" v-for="item in items">
1111111111
</li>
</ul>
</div>
<div id="item2" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
2222222222
</li>
</ul>
</div>
</div>
</div>
再配合mui.js使用就可以实现效果了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。