楼层/横向滚动/吸顶等(移动端-效果案例)

最新推荐文章于 2024-06-19 11:28:30 发布

题词策

最新推荐文章于 2024-06-19 11:28:30 发布

阅读量763

点赞数 3

分类专栏：移动端结构样式

本文链接：https://blog.csdn.net/Elementsboy/article/details/106606510

版权

结构样式同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

以下效果基于better-scroll插件实现

效果演示：横向滚动
在这里插入图片描述
源代码：

<div class="wrapper">
        <div class="content">
            <ul class="ul">
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
                <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <script src="../js/libs/bscroll.min.js"></script>
    <script>
    	// 注意：
        // 第一：实例化 并且开启横向滚动 scrollX：true
        // 第二：获取所有子元素的宽度总和，赋值给内盒子
       
        // 所有子元素
        var lis = [...document.querySelectorAll(".content ul li")];
        // 一个元素的宽
        var liW = lis[0].offsetWidth;
        // 把子元素的宽度加起来
        var sum = lis.length * liW;
        // 把总宽度赋值给父元素（注意，是实例化盒子下的子元素）
        document.querySelector(".content").style.width = sum + "px";
        // 实例化
        var myX = new BScroll(".wrapper", {
            // 开启点击事件
            click: true,
            // 开启横向滚动。默认false，需要打开
            scrollX: true
        });

    </script>

效果演示：楼层效果

在这里插入图片描述
源代码：

<div class="wrapper">
       <div class="content">
           <div class="item">
               <h2 id="A">A</h2>
               <ul>
                   <li>阿拉善盟</li>
                   <li>鞍山</li>
                   <li>安庆</li>
                   <li>安顺</li>
                   <li>阿克苏</li>
               </ul>
           </div>
           <div class="item">
               <h2 id="B">B</h2>
               <ul>
                   <li>北京</li>
                   <li>包头</li>
                   <li>本溪</li>
                   <li>巴彦淖尔</li>
                   <li>白城</li>
               </ul>
           </div>
           <div class="item">
               <h2 id="C">C</h2>
               <ul>
                   <li>重庆</li>
                   <li>成都</li>
                   <li>常州</li>
                   <li>长春</li>
                   <li>承德</li>
               </ul>
           </div>
           <div class="item">
               <h2 id="D">D</h2>
               <ul>
                   <li>大连</li>
                   <li>大庆</li>
                   <li>大兴安岭</li>
                   <li>大理</li>
                   <li>敦煌</li>
               </ul>
           </div>
       </div>
   </div>
<!-- 字母列表按钮 -->
   <div class="filexd">
       <ul>
           <li>A</li>
           <li>B</li>
           <li>C</li>
           <li>D</li>
       </ul>
   </div>

   <script src="../js/libs/bscroll.min.js"></script>
   <script>
       // 获取所有的字母列表
       var lis = [...document.querySelectorAll(".filexd li")];
       // 给字母列表添加点击事件
       lis.forEach(function(item){
           item.onclick = function(){
               // scrollToElement ：滚动到指定的目标元素。
               myX.scrollToElement(document.getElementById(this.innerHTML),500);
           }
       })
        // 实例化
        var myX = new BScroll(".wrapper", {
           // 开启点击事件
           click: true,
           // 开启横向滚动。
           scrollX: true
       });
   </script>

效果演示：导航吸顶效果:
在这里插入图片描述
源代码：

<body>
    <div class="nav" id="top2">导航条</div>
    <div class="container">
        <div class="header"></div>
        <div class="main">
            <div class="inner">
                <div class="banner">
                    广告图
                </div>
                <div class="nav" id="top1">导航条</div>
                <div class="item">
                    商品列表
                </div>
            </div>
        </div>
        <div class="footer"></div>
    </div>

    <script src="js/libs/flexible.js"></script>
    <script src="js/libs/bscroll.min.js"></script>
    <script>
        let nav = document.querySelector("#top1");
        let navFalse = document.querySelector("#top2");
        let navTop = nav.offsetTop;
        let navH = nav.offsetHeight;

        let mybs = new BScroll(".main", {
            probeType: 3
        })

        mybs.on("scroll", () => {
            if (mybs.y < 0 && Math.abs(mybs.y) > navTop) {
                navFalse.style.display = "block";
            } else {
                navFalse.style.display = "";
            }
        })
    </script>
</body>

以下效果基于swiper插件实现

效果演示：tab切换效果:
在这里插入图片描述

引入插件：
 <!-- 引入css样式 -->
<link rel="stylesheet" href="css/swiper.css">

<div class="wrapper">
       <ul class="tab">
           <li class="active">战士</li>
           <li>射手</li>
           <li>法师</li>
       </ul>
       <!-- 基本写法 -->
       <div class="swiper-container banner">
           <div class="swiper-wrapper">
               <div class="swiper-slide">战士战士战士战士</div>
               <div class="swiper-slide">射手射手射手</div>
               <div class="swiper-slide">法师法师法师</div>
           </div>
       </div>
   </div>
   <!-- 引入js插件 -->
   <script src="js/libs/swiper.min.js"></script>
   <script>
       // 获取tab按钮
       var btns = [...document.querySelectorAll(".tab li")];
       // 实例化
       var myTab = new Swiper(".banner", {
           // 注意：不能使用loop；loop模式下注意该值会被加上复制的slide数。
           // loop: true
           // on 监听swiper的slide改变
           on: {
               // slideChange ,当当前slide 发生改变
               slideChange: function () {
                   /*
                   * previousIndex：返回上一个活动块的索引，切换前的索引。
                   * activeIndex：返回当前活动块的索引。
                   */
                   // 把按钮对应索引改变高亮（当前增加）
                   btns[this.activeIndex].classList.add("active");
                   // （上一个移除）
                   btns[this.previousIndex].classList.remove("active");
               }
           }
       });
       // tab 点击
       btns.forEach(function (item, i) {
           item.onclick = function () {
               // 控制Swiper切换到指定slide。
               myTab.slideTo(i, 1000);
           }
       })
   </script>

花钱就像拉屎一样简单，赚钱就像吃屎一样难————Elementsboy

题词策

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
楼层/横向滚动/吸顶等(移动端-效果案例)

以下效果基于better-scroll插件实现效果演示：横向滚动源代码：<div class="wrapper"> <div class="content"> <ul class="ul"> <li><img src="https://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jp
复制链接

扫一扫