MUI组件（3）

作者: 白晓明 | 来源:发表于2019-04-14 14:50 被阅读10次

MUI组件（3）
muicss 转载dcloud.io
mui组件js API 转载dcloud.io
MUI开发需要注意的“点”
mui中图片手势缩放功能的实现
vue移除严格模式不生效问题
MUI组件（2）
MUI组件（1）
MUI组件（4）
MUI组件（5）

grid（栅格）

MUI提供了非常简单实用的 12 列响应式栅格系统。

栅格参数

尺寸	超小屏幕（<400px）(Extrasmall)	小屏幕(≥400px)（Small）
类前缀	`.mui-col-xs-[1-12]`	`.mui-col-sm-[1-12]`
列数	12	12
可嵌套	是	是

<div class="mui-row">
    <div class="mui-col-sm-6 mui-col-xs-12">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item1</a>
        </li>
    </div>
    <div class="mui-col-sm-6 mui-col-xs-12">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item2</a>
        </li>
    </div>
</div>

定义 mui-col-sm-6 在大屏(≥400px)设备上回展现为并排两列。
大屏
mui-col-xs-12 在小屏(<400px)设备上会覆盖之前定义的样式，展现为水平排列。
小屏

list（列表）

普通列表

//使用ml快捷生成默认列表
<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

普通列表

自定义列表高亮颜色`

/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
    background-color: #0062CC;
}

右侧添加导航箭头

右侧带箭头列表

右侧添加数字角标等控件

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        Item 1
        <span class="mui-badge mui-badge-blue">10</span>
    </li>
    <li class="mui-table-view-cell">
        Item 2
        <span class="mui-badge mui-badge-inverted mui-badge-blue">8</span>
    </li>
    <li class="mui-table-view-cell">
        Item 3
    </li>
</ul>

带角标列表

media list（图文列表）

<label>图文居左</label>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="images/logo.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>
<label>图文居右</label>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="images/logo.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>

图文列表

icon（图标）

MUI默认提供了手机APP开发常用的字体图标。

<span class="mui-icon mui-icon-weixin"></span>

transparentBar（透明状态栏）

//透明标题栏我们需要给标题栏节点添加 .mui-bar-transparent 样式
<header class="mui-bar mui-bar-nav mui-bar-transparent">
    <h1 class="mui-title">标题</h1>
</header>

若需要个性化定制，可以通过 data-* 属性或者JS API 来设置。

DOM API	作用	JS API
data-top	距离顶部高度（`滚动到该位置即触发`）	`{top:0}`
data-offset	滚动透明距离	`{offset:150}`
data-duration	过渡时间 `ms`	`{duration:16}`
data-scrollby	监听区域滚动容器	`{scrollyby:DOM}`

//DOM 用例
<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')
})