移动Web App
跨平台开发
用户不需要去卖场来下载安装App
任何时候都可以发布App
只需要一个开发项目
可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）
1 MUI-轻量APP框架
快速体验
Quickly get up and running with a mui app.
1. 下载Hello mui App
点击下载 已打包好的Hello mui 手机app，直接在手机上体验mui的控件UI及能力展示；
2. 创建Hello mui工程
可从https://www.dcloud.io下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
3. mui帮助文档
可从MUI帮助文档http://dev.dcloud.net.cn/mui/ui/ ——了解该框架的使用方法。
2 手机APP中事件监听
在手机APP中，事件绑定推荐使用DOM2模型。 用tap事件取代click事件。
事件绑定
除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。
事件取消
使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。 off()方法根据传入参数的不同，有不同的实现逻辑。
事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
3 手机APP中的图片轮播
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/comment.css" rel="stylesheet" />
<style type="text/css">
.mui-slider-item{
width: 100%;
height: 300px;
background-color: red;
}
.mui-slider-title{
background-color: rgba(255,0,0,0.7);
color: green;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播组件</h1>
</header>
<!--轮播组件-->
<div class="mui-content">
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item">
第一个轮播组件
</div>
<div class="mui-slider-item">
第二个轮播组件
</div>
</div>
</div>
<!--不支持循环图片轮播-->
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item"><a href="#"><img src="img/cbd.jpg" /></a>
<!--给当前新闻添加标题-->
<p class="mui-slider-title">这是一个新闻的标题</p>
</div>
<div class="mui-slider-item"><a href="#"><img src="img/muwu.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/shuijiao.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/yuantiao.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>
<!--支持循环的图片轮播-->
<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="img/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/cbd.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/shuijiao.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="img/cbd.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>
<button id="btn">点击我调到第三张</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
//获得slider插件对象
var gallery = mui(‘#slider‘);
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
//mui自带的事件绑定,只能用事件委派的方式
mui(".mui-content").on("tap","#btn",function(){
gallery.slider().gotoItem(2);
});
</script>
</body>
</html>
时间： 2024-12-08 16:25:14