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