H5如何做手机app(移动Web App)?图片轮播？

Posted 2020-10-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5如何做手机app(移动Web App)?图片轮播？相关的知识，希望对你有一定的参考价值。

移动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>