準(zhǔn)備工作
- mui模板
- IDE：HBuilder
分析
- 依據(jù)mui原有的實(shí)現(xiàn)关面，自定義選項(xiàng)卡風(fēng)格坦袍，即滿足了項(xiàng)目的需求，也達(dá)到熟悉mui的目的等太。
- 對(duì)mui css做式樣調(diào)整
開(kāi)始
先看自定義后的選項(xiàng)卡 效果：
自定義
原生的mui選項(xiàng)卡效果：
頂部選項(xiàng)卡-可左右拖動(dòng)
html5頁(yè)面代碼如下：
<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>
<!-- 進(jìn)度條 -->
<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的選項(xiàng)卡和切換時(shí)的滾動(dòng)條長(zhǎng)度都是按頁(yè)面總長(zhǎng)度的比例計(jì)算得到的，為了實(shí)現(xiàn)自定義的效果缩抡，需要把原有的這部分樣式改寫奠宜。
同時(shí)，為了讓選項(xiàng)卡向頁(yè)面中間靠攏缝其，可以設(shè)置以下css：
.block-style {
width: 60%; /* 選項(xiàng)卡占頁(yè)面的比例 */
margin-left: auto; /* 居中 */
margin-right: auto; /* 居中 */
}
這樣的話挎塌，選項(xiàng)卡和滾動(dòng)條的寬度都是可指定的了。
另外内边，圖中紅色小圓球的也是在原有基礎(chǔ)上改寫的劫瞳，思路是原有的滾動(dòng)條占位允許其存在，但把小球的位置設(shè)到每段滾動(dòng)條的中間跳仿。
注：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;會(huì)導(dǎo)致ios上input輸入框獲取不到焦點(diǎn)
