天和日远
天和日远
  • 发布:2015-05-31 13:59
  • 更新:2015-06-01 15:42
  • 阅读:2255

mui 开发app 开机画面 有那种 3~5张图轮播 最后点击 立即体验··再进入app 怎么实现

分类:MUI

mui 开发app 开机画面 有那种 3~5张图轮播 最后点击 立即体验··再进入app 怎么实现

2015-05-31 13:59 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

参考hello-mui的guide.html

  • 小和尚ABC

    怎么在index加载guide.html的?

    2016-04-15 11:40

天和日远

天和日远 (作者)

大哥 没有找到你说的文件··· 可以发我一个吗 我邮箱 953062754@qq.com

DCloud_UNI_FXY

DCloud_UNI_FXY

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  

            .mui-slider-item, .mui-slider-item a {  
                width: 100%;  
                height: 100%;  
            }  
            .mui-slider-item a img{  
                width: 100%;  
                min-height: 100%;  
            }  
            #enter {  
                position: absolute;  
                width: 160px;  
                left: 50%;  
                margin-left: -80px;  
                bottom: 15%;  
                padding: 10px;  
            }  
        </style>  
    </head>  

    <body>  
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">  
            <div class="mui-slider-group">  
                <!-- 第一张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="../images/guide-1.png">  
                    </a>  
                </div>  
                <!-- 第二张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="../images/guide-2.png">  
                    </a>  
                </div>  
                <!-- 第三张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="../images/guide-3.png">  
                    </a>  
                </div>  
                <!-- 第四张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="../images/guide-4.png">  
                        <button id='enter' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>  
                    </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>  
        <script src="../js/mui.min.js"></script>  
        <script>  
            (function($, doc) {  
                $.init();  
                var enterButton = doc.querySelector('#enter');  
                enterButton.addEventListener('tap', function(event) {  
                    $.back();  
                }, false);  
            }(mui, document));  
        </script>  
    </body>  

</html>
天和日远

天和日远 (作者)

谢谢楼上的分享 不过这只是一个轮播啊··· 我主要的想问的 如何把这轮播 插到 软件启动后的画面中 。。。 现在启动是单张图片, 如何把单张图片换成轮播呢 点击体检按钮可以再进入首页

Geeker

Geeker

你启动界面以后 就加载撒 然后 加载完了 缓存起 下次检测判断有没有加载过~~

Danny

Danny - QQ125904483

真是一根筋啊,认定要在启动页做....

贝壳

贝壳

这个效果应该是app的引导页,不是单纯的轮播吧

天和日远

天和日远 (作者)

我知道 可以先打开一个页面 ,但是 所有的判断都是在 主入口文件中去写 这样不是会有切屏的效果。。。 就是启动 加载画面 然后 进 主页面 再跳去欢迎页 再跳回来··· 效果太差了··· 我的意思有没有 直接替换 启动加载那个页面 , 就是 启动 直接就是欢迎轮播 加载完 点击立即体验 就直接进入主入口文件! 不知道可以实现不?

还有就是 追加一个问题 app软件 关闭后在启动 如何判断呢 ,如果是给storage 写一个参数的, 那么在关闭软件的时候 (不是退出)的情况选 如何清空 这个storage中的值呢 ? 还是说mui有 和 切屏一样的(resume) 监 听 呢 ?

该问题目前已经被锁定, 无法添加新回复