mui选显卡

最新推荐文章于 2024-04-24 11:22:57 发布

weixin_30895603

最新推荐文章于 2024-04-24 11:22:57 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/wwjm/p/7203830.html

版权

《mui学习笔记》：自定义选项卡

作者柳轻言关注

2016.05.21 22:24* 字数 747 阅读 2303评论 2喜欢 3

准备工作

mui模板
IDE：HBuilder

分析

依据mui原有的实现，自定义选项卡风格，即满足了项目的需求，也达到熟悉mui的目的。
对mui css做式样调整

开始

先看自定义后的选项卡效果：

自定义

原生的mui选项卡效果：

顶部选项卡-可左右拖动

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; }

比较两幅效果图可以看出，mui的选项卡和切换时的滚动条长度都是按页面总长度的比例计算得到的，为了实现自定义的效果，需要把原有的这部分样式改写。
同时，为了让选项卡向页面中间靠拢，可以设置以下css：

.block-style {
   width: 60%;               /* 选项卡占页面的比例 */ margin-left: auto; /* 居中 */ margin-right: auto; /* 居中 */ }

这样的话，选项卡和滚动条的宽度都是可指定的了。

另外，图中红色小圆球的也是在原有基础上改写的，思路是原有的滚动条占位允许其存在，但把小球的位置设到每段滚动条的中间。

注：mui的bug

*
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-user-select: none;

    outline: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }

-webkit-user-select: none;会导致ios上input输入框获取不到焦点

转载于:https://www.cnblogs.com/wwjm/p/7203830.html