移动端html使用swiper.js实现页面内容与导航栏同滑动

最新推荐文章于 2023-05-24 15:25:27 发布

福尔摩杰

最新推荐文章于 2023-05-24 15:25:27 发布

阅读量1.7k

点赞数

分类专栏： HTML JS 文章标签：移动端导航栏滑动导航栏与内容同时滑动 swiperjs滑动

本文链接：https://blog.csdn.net/qq_42484429/article/details/101680215

版权

HTML JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

移动端html使用swiper.js实现页面内容与导航栏同滑动

之前使用过ionic实现的导航栏可滑动，后来项目又使用纯html和js做滑动效果。于是发现了swiperjs，感觉很好用啊。记录一下，有需要的朋友可以参考。

先看一下效果图(不是动态图)，向左滑动内容，内容与上方导航栏同时变。
在这里插入图片描述

首先需要引入swiper相关的js与css文件。可以在swiper中文网下载。

引入js与css文件

<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" charset="utf-8"></script>

下面直接上全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=0.5, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .content {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: scroll;
    }
    .content-top{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #2a85e8;
    }
    a {
        text-decoration: none;
        color: #999 !important;
    }

    li {
        list-style: none;
    }

    .swiper-containee {
        max-width: 640px;
    }

    #nav {
        border-bottom: 1px solid #999;
        padding: 10px;
    }

    #nav li {
        text-align: center;
    }

    .active-nav {
        color: #fff;
    }

    .active-nav a {
        color: #2a85e8 !important;
        border-bottom: 2px solid;
        padding-bottom: 2px;
    }

    #image-swiper img{
        width: 100%;
    }
</style>

<body>
<div class="content">
    <div class="content-top">
        <span style="color: white;">移动端左右滑动(swiper.js)</span>
    </div>
    <div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav"><a href="javascript:;">第一页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第二页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第三页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第四页</a></li>
            <li class="swiper-slide"><a href="javascript:;">第五页</a></li>
        </ul>
    </div>

    <div id="page" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slidepage" style="height: 540px;">
                <div id="image-swiper" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/banner.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner2.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="images/banner4.png" alt="">
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
                <br>
                <div style="text-align: center; font-size: 20px;">
                    包含轮播图的滑动。
                </div>
                <br>
                <br>
                <div style="font-size: 18px;">
                    这里高度设置了540是固定的，<span style="color: red;">在540以内可以滑动。</span>
                    去掉后高度是内容撑起来的，在<span style="color: red;">内容的范围内左右滑动即可</span>。超出部分不在滑动区域内。
                    高度可自行设置。
                </div>
            </div>

            <div class="swiper-slide slidepage">
                第二块
            </div>
            <div class="swiper-slide slidepage">
                第三块
            </div>
            <div class="swiper-slide slidepage">
                第四块
            </div>
            <div class="swiper-slide slidepage">
                第五块
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" charset="utf-8">
<script>
    var mySwiper = new Swiper ('#image-swiper', {
        // loop: true, // 循环模式选项
        autoplay: {
            disableOnInteraction: false, // 自动切换, 手动切换后不停止
        },
        // preventClicksPropagation: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        on:{
            tap: function(){
                console.log(this.clickedIndex);
                console.log(this.slides.length);
            },
        }
    })

    var myNav = new Swiper('#nav', {
        spaceBetween: 10,
        slidesPerView : 4,// 每页显示几个
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        preventClicksPropagation : false,// 点击之后出发onclick事件
        // slideToClickedSlide: true,// 点击后过度到slide位置
        // centeredSlides : true,// 居中显示
        on:{
            tap: function(){
                myPage.slideTo( myNav.clickedIndex);
                console.log(this.clickedIndex);
            },
        }
    })
    var myPage = new Swiper('#page',{
        on:{
            slideChangeTransitionStart: function(){
                updateNavPosition();
                console.log(this.activeIndex);
            }}
    })
    function updateNavPosition(){
        $('#nav .active-nav').removeClass('active-nav');
        var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);
            if (activeNav.index()>myNav.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
                myNav.slideTo(activeNav.index()-thumbsPerNav)
            }
            else {
                console.log(3);
                myNav.slideTo(activeNav.index())
            }
        }
    }
</script>
</body>
</html>

关于swiper.js的相关使用可查看swiper中文api文档。根据api基本都可以实现需要的功能。
如有什么问题，欢迎留言。

福尔摩杰

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
移动端html使用swiper.js实现页面内容与导航栏同滑动

移动端html使用swiper.js实现页面内容与导航栏同滑动之前使用过ionic实现的导航栏可滑动，后来项目又使用纯html和js做滑动效果。于是发现了swiperjs，感觉很好用啊。记录一下，有需要的朋友可以参考。先看一下效果图(不是动态图)，向左滑动内容，内容与上方导航栏同时变。首先需要引入swiper相关的js与css文件。可以在swiper中文网下载。引入js与css文件...
复制链接

扫一扫