目录
一 MUI的官网文档
https://dev.dcloud.net.cn/mui/ui/
二 MUI示例代码
三 写代码方法
1 官方文档为理论指导
2 官方示例代码为实际模板
四 实战
1 项目创建
2 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<!-- 头部导航 -->
<!-- mhe 按下回车键，快速出现顶部导航栏 -->
<header id="header" class="mui-bar mui-bar-nav public-bg-color">
<!-- 关闭当前页面 mui图标通用属性 图标样式 图标位置（左或右）-->
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">导航栏</h1>
</header>
<!-- 底部导航 -->
<!-- mtab快速创建底部导航 -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-home-filled"></span>
<span class="mui-tab-label">社区</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-person-filled"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
<!-- mbody快速创建内容区 -->
<div class="mui-content public-pading public-magin-top">
<!-- 搜索框 -->
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="搜索" data-input-clear="1" data-input-search="1">
</div>
<!-- 控制是否定时轮播 -->
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</div>
<!-- 循环轮播图 -->
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="images/shuijiao.jpg">
</a>
</div>
</div>
<!-- 轮播图上的小圆圈 -->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<!-- 图文列表 -->
<ul class="mui-table-view public-magin-top">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">
<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="images/muwu.jpg">
<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="images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
</ul>
<!-- 快捷键：mlist -->
<!-- 纯文字列表 -->
<ul class="mui-table-view public-magin-top">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
列表项目 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
列表项目 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
列表项目 3
</a>
</li>
</ul>
<!-- 快捷键mgr -->
<!-- 九宫格 -->
<!-- 上下空10，左右空0 -->
<ul class="mui-table-view mui-grid-view mui-grid-9 public-grid-colr" style="margin: 10px 0px;">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
<div class="mui-media-body">Email</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">Location</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div>
</a>
</li>
</ul>
<!-- 按钮 -->
<button type="button" class="mui-btn mui-btn-blue" style="width: 100%;padding: 10px 0px;">按钮</button>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack: true //启用右滑关闭功能
});
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
</script>
</body>
</html>3 自定义的CSS样式
/* class选择器 */
.public-bg-color {
background-color: #55aaff;
}
/* 包含选择器，选择器组合 */
.public-bg-color a,
.public-bg-color h1 {
color: #ffffff;
}
/* 包含选择器 */
.mui-bar-tab .mui-tab-item.mui-active {
color: #55aaff;
}
/* class选择器 */
.public-pading {
padding: 0px 10px;
}
/* class 选择器 */
.public-magin-top {
margin-top: 10px;
;
}
/* class 选择器 不加important没效果，强调它是重要的*/
.public-grid-colr {
background-color: #FFFFFF !important;
}
4 效果
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
