MUI - 引導頁製做

時間 2019-12-04

標籤 mui 引導製做简体版

原文原文鏈接

引導頁製做

本文的引導頁和[官方的引導頁示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guide.html)仍是有必定的區別的。
頁面的展現以圖片爲主，包括文字也已製做成圖片
另外對首頁和尾頁分別添加了右滑和左滑事件，以保證頁面背景和當前頁背景是相同的，這樣來確保樣式的統一

http://www.cnblogs.com/phillyx/javascript

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            html,
            body {
                height: 100%;
            }
            body {
                margin: 0;
            }
            .mui-content {
                height: 100%;
                padding: 0;
            }
            .mui-slider {
                height: 100%;
            }
            .mui-slider-group {
                height: 100%;
            }
            .mui-slider-item {
                height: 100%;
                width: 100%;
                margin-left: 0px;
                margin-right: 0px;
                border: none;
            }
            a {
                height: 100%;
            }
            #into {
                bottom: 11%;
                position: absolute;
                width: 40%;
                height: 35px;
                text-align: center;
                left: 30%;
                padding: 0;
                border: 0;
                background: transparent;
                z-index: 100;
            }
            .img_content {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .img_content img:first-child {
                position: absolute;
                top: 15%;
            }
            .img_content img:nth-child(2) {
                position: absolute;
                top: 30%;
            }
            .img_content img:last-child {
                position: absolute;
                bottom: 10%;
            }
        </style>
    </head>

    <body>
        <div class="mui-content" style="height: 100%;overflow: hidden;padding: 0px;margin: 0px;background-color: #5dcbe2;">
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group">
                    <!-- 第一張 -->
                    <div class="mui-slider-item" style="background-color: #5dcbe2;">
                        <div class="img_content">
                            <img src="../images/welcome/text1.png" />
                            <img src="../images/welcome/1.png">
                        </div>

                    </div>

                    <!-- 第二張 -->
                    <div class="mui-slider-item" style="background-color: #68d8b0;">
                        <div class="img_content">
                            <img src="../images/welcome/text2.png" />
                            <img src="../images/welcome/2.png">
                        </div>
                    </div>
                    <!-- 第三張-->

                    <div class="mui-slider-item" style="background-color: #c1392b;">
                        <div class="img_content">
                            <img src="../images/welcome/text3.png" />
                            <img src="../images/welcome/3.png">
                            <button id="into"></button>
                            <img src="../images/welcome/btnin.png">

                        </div>

                    </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>
            </div>

        </div>
        </div>
    </body>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function(){           
            mui.os.ios&&plus.navigator.setFullscreen(true);         
            var slider = mui('.mui-slider').slider();           
            initPageguid();         
            setStatusBarBackgroud();            
            plus.navigator.closeSplashscreen();
            mui("#into")[0].addEventListener('tap', function() {                                
                mui.fire(plus.webview.getLaunchWebview(), 'run');
                //plus.webview.currentWebview().close();//等登陸註冊等頁面顯示以後再關閉               
            }); 
            
            function initPageguid(){
                //綁定滑屏相關事件
                var gallery = mui('.mui-slider')[0];
                gallery.addEventListener('swiperight', function(e) {
                    //向左划動
                    var num = mui('.mui-slider').slider().getSlideNumber() - 1;
                    setContainerBackg(num);
                });
                gallery.addEventListener('swipeleft', function(e) {
                    //向右划動
                    var num = mui('.mui-slider').slider().getSlideNumber() + 1;
                    setContainerBackg(num);
                });
            }
            
            function setStatusBarBackgroud () {
                if (mui.os.ios) {
                    plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
                    //提早設置登錄頁背景顏色
                    plus.navigator.setStatusBarBackground("#3A75B8");
                }
            };
            function setContainerBackg(num) {
                //提早設置背景色
                if (num == 0) {
                    mui('.mui-content')[0].style.backgroundColor = '#5dcbe2';
                } else if (num == 2) {
                    mui('.mui-content')[0].style.backgroundColor = '#c1392b';
                }
            };
        })      
    </script>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。