找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发使用Swiper制作Webapp菜单栏切换

2018-11-29 分类：教程 阅读(768) 评论(0)
前端开发主流浏览器差异
前端开发者浏览器
手机浏览器 前端开发

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>使用Swiper制作webapp菜单栏切换</title>
        <meta
            name=”viewport”
            content=”width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”
        />
        <script src=”https://code.jquery.com/jquery-2.2.4.min.js”></script>
        <script src=”//cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js”></script>
        <link
            rel=”stylesheet”
            type=”text/css”
            href=”//cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css”
        />
        <style>
            body {
                min-width: 320px;
                max-width: 640px;
                margin: 0 auto;
                color: #333;
                padding: 0;
                font-family: ‘Microsoft Yahei’;
                text-align: center;
            }
            .container {
                width: 100%;
                border: 1px solid #ccc;
            }
            .swiper1 {
                width: 100%;
            }
            .swiper1 .selected {
                color: #ec5566;
                border-bottom: 2px solid #ec5566;
            }
            .swiper1 .swiper-slide {
                text-align: center;
                font-size: 16px;
                height: 50px;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                cursor: pointer;
            }
            .swiper2 {
                width: 100%;
            }
            .swiper2 .swiper-slide {
                height: calc(100vh – 50px);
                background-color: #ccc;
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class=”container”>
            <!– swiper1 –>
            <div class=”swiper-container swiper1″>
                <div class=”swiper-wrapper”>
                    <div class=”swiper-slide selected”>推荐</div>
                    <div class=”swiper-slide”>菜单 2</div>
                    <div class=”swiper-slide”>菜单 3</div>
                    <div class=”swiper-slide”>菜单 4</div>
                    <div class=”swiper-slide”>菜单 5</div>
                    <div class=”swiper-slide”>菜单 6</div>
                    <div class=”swiper-slide”>菜单 7</div>
                    <div class=”swiper-slide”>菜单 8</div>
                    <div class=”swiper-slide”>菜单 9</div>
                    <div class=”swiper-slide”>菜单 10</div>
                </div>
            </div>
            <!– swiper2 –>
            <div class=”swiper-container swiper2″>
                <div class=”swiper-wrapper”>
                    <div class=”swiper-slide”>内容 1</div>
                    <div class=”swiper-slide”>内容 2</div>
                    <div class=”swiper-slide”>内容 3</div>
                    <div class=”swiper-slide”>内容 4</div>
                    <div class=”swiper-slide”>内容 5</div>
                    <div class=”swiper-slide”>内容 6</div>
                    <div class=”swiper-slide”>内容 7</div>
                    <div class=”swiper-slide”>内容 8</div>
                    <div class=”swiper-slide”>内容 9</div>
                    <div class=”swiper-slide”>内容 10</div>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                function setCurrentSlide(ele, index) {
                    $(‘.swiper1 .swiper-slide’).removeClass(‘selected’)
                    ele.addClass(‘selected’)
                    //swiper1.initialSlide=index;
                }
                var swiper1 = new Swiper(‘.swiper1’, {
                    slidesPerView: 5,
                    paginationClickable: true,
                    spaceBetween: 10,
                    freeMode: true,
                    loop: false,
                    onTab: function(swiper) {
                        var n = swiper1.clickedIndex
                        alert(1)
                    },
                })
                swiper1.slides.each(function(index, val) {
                    var ele = $(this)
                    ele.on(‘click’, function() {
                        setCurrentSlide(ele, index)
                        swiper2.slideTo(index, 500, false)
                        //mySwiper.initialSlide=index;
                    })
                })
                var swiper2 = new Swiper(‘.swiper2’, {
                    direction: ‘horizontal’,
                    loop: false,
                    autoHeight: true,
                    onSlideChangeEnd: function(swiper) {
                        var n = swiper.activeIndex
                        setCurrentSlide($(‘.swiper1 .swiper-slide’).eq(n), n)
                        swiper1.slideTo(n, 500, false)
                    },
                })
            })
        </script>
    </body>
</html>

感觉Swiper用做轮播蛮多的，突然发现这样组合也可以。
因为是基于jQuery的库，所以如果webapp是用jQuery库开发的应该可以用到吧。

前端开发所用测试浏览器
前端开发用那个浏览器
前端开发常用浏览器
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论