H5如何做手機app(移動Web App)?圖片輪播？
阿新 • • 發佈：2017-10-01
tom 選擇 lan pre 自帶 ide pull oat css3
移動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>
H5如何做手機app(移動Web App)?圖片輪播？