mui 官方网站没有tab的API,在此记录一下。
mui的tab分为两种:1.点击的选项卡。 2.点击可拖动的选项卡;
一、点击的选项卡javascript
<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而已。java
<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使用就能够实现效果了。ide