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

准备工作

1. mui模板
2. IDE：HBuilder

分析

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

开始

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

自定义

原生的mui选项卡效果：

顶部选项卡-可左右拖动

html5页面代码如下：

    

        

            

                
支付宝
                
口碑
                
朋友
                
我的
            
        
        
        
        

            

                

            
        

        

            
            
div1
            
            
div2
            
            
div3
            
            
div4
        
    

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输入框获取不到焦点