mui 选项卡功能

效果

A0CD50AA-D3A6-47AF-8FB8-021227712A13.png

3138DCF9-EE80-46F6-AF10-63A7E47EAB93.png

代码:

选项卡内容

            <div id="sliderSegmentControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    全部订单
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    待付款
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    待收货
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    待评价
                </a>
            </div>

游标

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" ></div>

item内容

<div class="mui-slider-group">
                <div id="item1mobile" class="md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
                    全部订单
                </div>
                <div id="item2mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos1 md-box md-ver">
                    待付款     
                </div> 
                <div id="item3mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">
                        待收货    
                </div> 
                <div id="item4mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">
                        待评价    
                </div>  
</div>

总代码

<div id="slider" class="mui-slider">
            <div id="sliderSegmentControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    全部订单
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    待付款
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    待收货
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    待评价
                </a>
            </div>
            
            
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" ></div>
            
            <div class="mui-slider-group">
                <div id="item1mobile" class="md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
                    全部订单
                </div>
                <div id="item2mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos1 md-box md-ver">
                    待付款     
                </div> 
                <div id="item3mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">
                        待收货    
                </div> 
                <div id="item4mobile" class="bg md-f1 mui-slider-item mui-control-content detailInfos2 md-box md-ver">
                        待评价    
                </div>  
            </div>
            
        </div>