H5如何作手機app(移動Web App)?圖片輪播？ionic、MUI

時間 2019-11-10

標籤 h5 如何手機 app 移動 web 圖片 ionic mui 欄目無線简体版

原文原文鏈接

移動Web App
跨平臺開發
用戶不須要去賣場來下載安裝App
任什麼時候候均可以發佈App
只須要一個開發項目
能夠使用HTML5,CSS3以及JavaScript以及服務器端語言來完成（PHP,Ruby on Rails,Python）

javascript

1 MUI-輕量APP框架

快速體驗

Quickly get up and running with a mui app.css

1. 下載Hello mui App

點擊下載已打包好的Hello mui 手機app，直接在手機上體驗mui的控件UI及能力展現；html

2. 建立Hello mui工程

可從https://www.dcloud.io下載Hbuilder，選擇新建「移動APP」，並選擇「Hello MUI」工程模板，建立工程；而後經過數據線將手機鏈接上電腦，點擊運行，就能夠在手機上體驗MUI的各項能力。 java

3. mui幫助文檔

可從MUI幫助文檔http://dev.dcloud.net.cn/mui/ui/ ——瞭解該框架的使用方法。服務器

3 ionic開發框架

ionic : 一個輕量的手機UI庫，具備速度快，界面現代化、美觀等特色。爲了解決其餘一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。app

ionic 建立 APP | 菜鳥教程 http://www.runoob.com/ionic/ionic-creat-app.html框架

4 手機APP中事件監聽

在手機APP中，事件綁定推薦使用DOM2模型。用tap事件取代click事件。

事件綁定

除了能夠使用addEventListener()方法監聽某個特定元素上的事件外，也能夠使用.on()方法實現批量元素的事件綁定。ionic

事件取消

使用on()方法綁定事件後，若但願取消綁定，則能夠使用off()方法。 off()方法根據傳入參數的不一樣，有不一樣的實現邏輯。ide

事件觸發

使用mui.trigger()方法能夠動態觸發特定DOM元素上的事件。oop

3 手機APP中的圖片輪播(MUI)

<!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>