MUI从入门到项目实战（十）（MUI组件之transparentBar、radio、range）

一、transparentBar

 当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。

透明标题栏组件比较简单，只需要在header组件上添加.mui-bar-transparent类即可，如下为示例代码

<header class="mui-bar mui-bar-nav mui-bar-transparent">
    <h1 class="mui-title">标题</h1>
</header>

如果需要个性化定制可通过data-*属性或者jsAPIDIY

DOM API	作用	JS API
data-top	距离顶部高度(滚动到该位置即触发)	{top:0}
data-offset	滚动透明距离	{offset:150}
data-duration	过渡时间  ms	{duration:16}
data-scrollby	监听区域滚动容器  (*mui 3.5版本+支持) 默认window默认监听原生滚动, 如监听mui scroll控件滚动,则: document.querySelector('.mui-scroll-wrapper')	{scrollby:DOM}

DOM API使用示例:

<header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16' data-scrollby=".mui-scroll-wrapper">
    <h1 class="mui-title">标题</h1>
</header>

JS API使用示例:

mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})

二、radio

 radio用于单选的情况

                                   

DOM结构

<div class="mui-input-row mui-radio">
    <label>radio</label>
    <input name="radio1" type="radio">
</div>

默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

<div class="mui-input-row mui-radio mui-left">
    <label>radio</label>
    <input name="radio1" type="radio">
</div> 

若要禁用radio，只需在radio上增加disabled属性即可；

mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

<ul class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>

 列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML：

var list = document.querySelector('.mui-table-view.mui-table-view-radio');
list.addEventListener('selected',function(e){
    console.log("当前选中的为："+e.detail.el.innerText);
});

三、range

 滑块常用于区间数字选择

                    

在主内容区下写入以下代码：

<div class="mui-input-row mui-input-range">
    <label>Range</label>
    <input type="range" min="0" max="100">
</div>