mui tab使用方法

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

相關文章
相關標籤/搜索