mui自定义选项卡

最新推荐文章于 2023-07-15 22:27:10 发布

渣渣枫!

最新推荐文章于 2023-07-15 22:27:10 发布

阅读量785

点赞数 2

更换过后的效果图:
在这里插入图片描述
html5页面代码如下：

<body>
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="block-style">
                <div class="control-item-inline"><a class="mui-control-item mui-active" href="#item1mobile">支付宝</a></div>
                <div class="control-item-inline"><a class="mui-control-item" href="#item2mobile">口碑</a></div>
                <div class="control-item-inline"><a class="mui-control-item" href="#item3mobile">朋友</a></div>
                <div class="control-item-inline"><a class="mui-control-item" href="#item4mobile">我的</a></div>
            </div>
        </div>
        
        <!-- 进度条 -->
        <div class="block-style">
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3" style="margin-top: -6px;">
                <div class="green-ball"></div>
            </div>
        </div>

        <div class="mui-slider-group">
            <!-- 支付宝 -->
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"><div>div1</div></div>
            <!-- 口碑 -->
            <div id="item2mobile" class="mui-slider-item mui-control-content"><div>div2</div></div>
            <!-- 朋友 -->
            <div id="item3mobile" class="mui-slider-item mui-control-content"><div>div3</div></div>
            <!-- 我的 -->
            <div id="item4mobile" class="mui-slider-item mui-control-content"><div>div4</div></div>
        </div>
    </div>
</body>

css式样主要部分：

.green-ball {
    width: 10px;
    height: 10px;
    background-color: #FF0055;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.block-style {
    width:60%;
    margin-left: auto;
    margin-right: auto;
}

.control-item-inline {
    width:25%;
    display:inline-block;
    float: left;
}

.mui-control-content {
    min-height: 300px;
}

作者：柳轻言
链接：https://www.jianshu.com/p/8d0b3894e0dc
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。