mui tab使用方法

2024年5月22日 193次阅读 来源: 泽浩沉

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使用就可以实现效果了。

    原文作者：泽浩沉
    原文地址: https://segmentfault.com/a/1190000007689996
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞