关注前端 | 前端博客
当前位置: HTML5 > H5移动端

H5移动端

2018-08-31 分类:HTML5 作者:管理员 阅读(1161)

整理下自己写H5时常用的库或是框架,以便自己熟记在心。

swiper.js

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果

swiper-banner

示例:

banner

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>swiper-banner</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
</head>
<style>
body{
  margin: 0;
}
#banner {
   width: 100%;
    overflow: hidden;
    position: relative;
}

#banner .swiper-slide {
 width: 100%;
    position: relative;
    text-align: center;
}

#banner img {
   max-width: 100%;
    display: block;
}

#banner h2 {
   text-align: center;
    font-size: 1em;
    height: 42px;
    line-height: 42px;
    color: #fafafa;
   position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    font-weight: normal;
    text-shadow: 1px 1px 1px #000;
   /* background-color: rgba(21,20,20,0.5); */
    background-color: rgba(0,0,0,0);
    background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
    background: -webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
    background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
}
#banner .pagination {
   position: absolute;
    z-index: 20;
    bottom: 0;
    text-align: center;
}

#banner .swiper-pagination-bullet-active {
   background: #ff6600!important;
}

#banner .swiper-pagination-bullet {
   display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #fff;
   margin: 0 2px;
    opacity: 0.8;
    cursor: pointer;
}
</style>
<body>
  <!-- banner -->
  <div id="banner">
    <!-- 轮播容器 -->
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <img src="01.jpg" alt="">
        <h2>龙猫1</h2>
      </div>

      <div class="swiper-slide red-slide" >
        <img src="02.jpg" alt="">
        <h2>龙猫2</h2>
      </div>

      <div class="swiper-slide">
        <img src="03.jpg" alt="">
        <h2>龙猫3</h2>
      </div>

      <div class="swiper-slide">
        <img src="04.jpg" alt="">
        <h2>龙猫4</h2>
      </div>

    </div>

    <!-- 前进 - 后退 -->
      <div class="swiper-button-prev"></div><!--左箭头-->
    <div class="swiper-button-next"></div><!--右箭头-->

    <!-- 分页 -->
    <div class="pagination">
      <span class="swiper-pagination-bullet"></span>
      <span class="swiper-pagination-bullet"></span>
      <span class="swiper-pagination-bullet"></span>
      <span class="swiper-pagination-bullet"></span>
    </div>
  </div>




</body>
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script>

  /*swiper-banner*/

  var mySwiper = new Swiper('#banner', {
    autoplay:true,//等同于以下设置
    /*autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
      },*/

      pagination: {
        el:'.pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      loop : true,
  });

</script>
</html>

横向滑动

示例图:

tap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>横向滑动</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
</head>
<style>
body{
  margin: 0;
}
#header {
   position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 43px;
    overflow: hidden;
    background: #fdfdfc;
   font: 12px/40px hiragino sans gb,microsoft yahei,simsun;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
#top-line {
   width: 100%;
    height: 3px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    background-color: #0fa6ea;
   background: -webkit-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: -moz-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: -ms-linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
    background: linear-gradient(left,rgba(15,166,234,1) 0,rgba(89,204,24,1) 10%,rgba(15,166,234,1) 60%,rgba(15,166,234,1) 100%);
}

#header .swiper-slide {
   padding: 0 20px;
    width: auto;
}

</style>
<body>

  <!-- 横向滑动 -->

  <div id="header">
    <div id="top-line"></div>
      <div class="swiper-wrapper">
      <div class="swiper-slide">新闻</div>
      <div class="swiper-slide">财经</div>
      <div class="swiper-slide">娱乐</div>
      <div class="swiper-slide">体育</div>
      <div class="swiper-slide">订阅</div>
      <div class="swiper-slide">微博</div>
      <div class="swiper-slide">空间</div>
      <div class="swiper-slide">书城</div>
    </div>
  </div>






</body>
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script>

   var navSwiper = new Swiper('#header', {
        freeMode: true,
        slidesPerView: 'auto',
        freeModeSticky: true,
    });


</script>
</html>

announcement(公告)

示例图:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>announcement 公告</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
</head>
<style>
body{
  margin: 0;
}
#announcement {
   height: 2em;
    background: #f5f8fc;
   border: 1px solid #d2e1f1;
   margin: 0.5em;
    overflow: hidden;
}

#announcement a {
   color: #294c7f;
   text-decoration: none;
    display: block;
    line-height: 2;
    height: 2em;
    text-indent: 0.5em;
   
}


</style>
<body>

  <!-- 横向滑动 -->

    <div id="announcement">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="#">头条消息1</a></div>
            <div class="swiper-slide"><a href="#">头条消息2</a></div>
            <div class="swiper-slide"><a href="#">头条消息3</a></div>
            <div class="swiper-slide"><a href="#">头条消息4</a></div>
            <div class="swiper-slide"><a href="#">头条消息5</a></div>
        </div>
    </div>





</body>
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script>

    var announcementSwiper = new Swiper('#announcement', {
        direction: 'vertical',
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        }
    })

</script>
</html>

触屏Tab切换

示例图:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab选项卡</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
</head>
<style>
body,ul,li{
  margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.tabs {
    border-top: 2px solid #9ac7ed;
   background: url(headbg.png) no-repeat left top #f9fafa;
   background-size: auto 100%;
    width: 100%;
    height: 38px;
    overflow: hidden;
}

.tabs a.active {
    border-top: 2px solid #2a70be;
   margin-top: -2px;
    background-image: url(tab_ui.png);
    background-repeat: no-repeat;
    -webkit-background-size: 64px 39px;
    -moz-background-size: 64px 39px;
    -o-background-size: 64px 39px;
    background-size: 64px 39px;
    background-position: left top;
    color: #c14545;
}

.tabs a {
    font-weight: normal;
    text-align: center;
    float: left;
    width: 64px;
    height: 38px;
    line-height: 38px;
    color: #2a70be;
   text-decoration: none;
}

#tabs-container {
   height: 400px;
}

.news-list li {
    overflow: hidden;
    border-bottom: 1px solid #eceef0;
   box-shadow: 0 1px 1px #fff;
   font-weight: normal;
    height: 35px;
    line-height: 35px;
    font-size: 80%;
}

.news-list {
    padding: 0 10px;
}

</style>
<body>

  <!-- tab -->

    <div class="tabs">
        <a href="#" class="active">新闻</a>
        <a href="#" class="">社会</a>
        <a href="#" class="">娱乐</a>
    </div>

    <!-- tab container -->

    <div id="tabs-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>女子强行阻拦高铁发车 称其丈夫没上车</li>
                    <li>小马奔腾创始人妻子被判赔2亿债务</li>
                    <li>杭州女子将200平荒地改造成“秘密花园”</li>
                    <li>“紫光阁饭店”事件,乌龙背后是热搜的生意</li>
                    <li>最美乘务员冒雪挨个扶旅客下火车</li>
                    <li>五月天周杰伦再度合体</li>
                    <li>张馨予被赞模特身材</li>
                    <li>惊呆,杨紫的脸现在跟脖子一样宽了!</li>
                    <li>睡姿暴露你偷情指数</li>
                    <li>济南小伙儿自掏腰包,为陌生农民工加菜</li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>女子街边卖早餐卖蓝色油条生意火爆</li>
                    <li>保定励志哥!坐着轮椅唱歌成网红</li>
                    <li>电影院保安恋上女研究生</li>
                    <li>19岁女生保送北大直博</li>
                    <li>男子越狱期间强奸女友12岁的女儿</li>
                    <li>8旬爷爷因三个孩子都不赡养</li>
                    <li>7座面包车塞进20名学生</li>
                    <li>老人做家务时羽绒服突然“爆炸”</li>
                    <li>直播间里,用歌舞抗癌的70岁“网红”</li>
                    <li>PG_ONE粉丝买热搜"紫光阁地沟油"</li>
                </ul>
            </div>
            <div class="swiper-slide">
                <ul class="news-list">
                    <li>“绿帽门”后贾乃亮深夜买醉</li>
                    <li>姚笛大方挥手无名指戒指抢眼</li>
                    <li>汪小菲被大S减肥成果吓到</li>
                    <li>Baby和秀智同穿18万仙女裙</li>
                    <li>易烊千玺得罪粉丝?接机时粉丝不想理他</li>
                    <li>Tara成员:送了跑车还有90亿</li>
                    <li>蒋欣在节目上的表情超有戏</li>
                    <li>李小璐最新写真曝光,大走稳重的知性风</li>
                    <li>马思纯和欧豪穿同款秀恩爱</li>
                    <li>90届奥斯卡颁奖礼发海报</li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>

    var tabsSwiper = new Swiper('#tabs-container', {
        speed: 500,
        on: {
            slideChangeTransitionStart: function() {
                $(".tabs .active").removeClass('active');
                $(".tabs a").eq(this.activeIndex).addClass('active');
            }
        }
    })

    $(".tabs a").on('click', function(e) {
        e.preventDefault()
        $(".tabs .active").removeClass('active')
        $(this).addClass('active')
        tabsSwiper.slideTo($(this).index())
    })

</script>
</html>

zepto.js

better-scroll(bscroll.js)

better-scroll手册

上下拉回弹效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no" />
  <title>下上拉回弹</title>
</head>
<style>

  html{
    font-size: 100%;
  }
  .wrapper{
    width: 100vw;
    height: 100vh;
    /*
      100 vw == 1可视区宽度
      100 vh == 1可视区高度
    */

    overflow: hidden;
  }
  .wrapper ul{
    padding: 1rem 1rem 2rem 1rem;
  }
  .scrollbar{
    position: relative;
  }
  .scrollbar li{
    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
  }
</style>
<body>
  <div class="wrapper">
    <ul class="scrollbar">
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
<script>
  let wrap = document.querySelector('.wrapper');
  let list = document.querySelector('.scrollbar');
  let bScroll = new BScroll(wrap,{
    pullUpLoad: {
      threshold: 50
    },
    pullDownRefresh: {
      stop: 0
    }
  });
</script>
</html>

监听上下拉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no" />
  <title>监听下拉上拉</title>
  <!-- <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="normalize.css"> -->
</head>
<style>

  html{
    font-size: 100%;
  }
  .wrapper{
    width: 100vw;
    height: 100vh;
    /*
      100 vw == 1可视区宽度
      100 vh == 1可视区高度
    */

    overflow: hidden;
  }
  .wrapper .list{
    padding: 1rem 1rem 2rem 1rem;
  }
  .list{
    position: relative;
  }
  .list li{
    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(7,17,27,0.1);
  }
</style>
<body>
  <div class="wrapper">
    <ul class="list">
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
      <li>下拉刷新上拉加载</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
<script>
  let wrap = document.querySelector('.wrapper');
  let list = document.querySelector('.list');
  let bScroll = new BScroll(wrap,{
    pullUpLoad: {
      threshold: 20,//设置触发下拉回调的translateY值
    },
    pullDownRefresh: {
      stop: 0
    }
  });

  /* 下拉刷新 */
  bScroll.on("pullingDown",function(){
    console.log('被下拉了')
    list.classList.add("pullDown");
    bScroll.finishPullDown();
    bScroll.refresh();
    list.classList.remove("pullDown");
  });
  /* BScroll 移动的是 wrap 下第0个子元素 */
  bScroll.on("pullingUp",function(){
    console.log('被上拉了');
    list.classList.add("pullUp");
    list.classList.remove("pullUp");
    bScroll.finishPullUp();
    bScroll.refresh();
  });
</script>
</html>

indexList

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
<meta charset="UTF-8">
<title>indexList</title>
<style type="text/css">
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-wrapper{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
}
.index-list-content{
  background: #fff;
 border-radius: 2px;
}

.index-list-title{
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;  
}

.index-list-anchor{
  padding: 16px 16px 10px 16px;
  line-height: 1;
  font-size: 14px;
  color: #999;
 background: #f7f7f7;  
}

.index-list-item {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
}
.index-list-item:last-child{
  border: none;
}
.index-list-item_active{
  background: #ddd;
}
.index-list-fixed{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
  color: #999;
 background: #f7f7f7;  
}

.index-list-nav {
  position: absolute;
  z-index: 30;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: Helvetica;
}
.index-list-nav ul {
  padding: 0;
  margin: 0;
}      
.index-list-nav li{
  padding: 6px 16px 0 16px;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
  font-size: 12px;
  color: gray;
}          
.index-list-nav .active {
  color: blue;
}
               
</style>
</head>
<body>
<div class="list-wrapper">
    <div class="scroll-content">
        <div class="index-list-content">
            <div class="index-list-title">
                定位城市: 背景
            </div>
            <ul>
                <li>
                    <h2 class="index-list-anchor">
                        ★热门城市
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            北京市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            上海市
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        A
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            鞍山市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            安庆市
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        B
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
             
                            北京市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            巴音郭楞州
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            博尔塔拉州
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        C
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            成都市
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        E
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            鄂尔多斯市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            鄂州市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            恩施州
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        F
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            福州市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            佛山市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            防城港市
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        G
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            广州市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            贵阳市
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        H
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            杭州市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            和田地区
                        </li>
                    </ul>
                </li>
                <li>
                    <h2 class="index-list-anchor">
                        Z
                    </h2>
                    <ul>
                        <li class="index-list-item border-bottom-1px">
                            郑州市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            张家口市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            张家界市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            珠海市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            中山市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            自贡市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            资阳市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            枣庄市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            舟山
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            遵义市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            淄博市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            株洲市
                        </li>
                        <li class="index-list-item border-bottom-1px">
                            中卫市
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="index-list-nav">
    <ul>
        <li data-index="0" class="active">
            ★
        </li>
        <li data-index="1">
            A
        </li>
        <li data-index="2" class="">
            B
        </li>
        <li data-index="3" class="">
            C
        </li>
        <li data-index="4" class="">
            E
        </li>
        <li data-index="5" class="">
            F
        </li>
        <li data-index="6" class="">
            G
        </li>
        <li data-index="7" class="">
            H
        </li>
        <li data-index="8" class="">
            Z
        </li>
    </ul>
</div>
<div class="index-list-fixed" style="display: none;">
    A
</div>
<script type="text/javascript" src="https://unpkg.com/better-scroll/dist/bscroll.min.js.js"></script>
<script>
    /* bscroll 使用 */

    let listWrapper = document.querySelector('.list-wrapper');
    let indexListNav = document.querySelector('.index-list-nav');
    let indexListNavs = indexListNav.querySelectorAll('li');
    let indexListFixed = document.querySelector('.index-list-fixed');
    let indexList = new BScroll(listWrapper,{
        probeType: 3
    });
    let indexListContent = document.querySelector('.index-list-content');
    let indexLists = indexListContent.children[1].children;
    indexListNav.addEventListener('touchstart', function(e) {
        setIndex(e.changedTouches[0].clientY);
    });
    indexListNav.addEventListener('touchmove', function(e) {
        setIndex(e.changedTouches[0].clientY);
    });
    indexList.on("scroll",function(e){
        let y = -e.y;
        if(y < indexLists[0].offsetTop){
            setNav(0);
            indexListFixed.style.display = "none";
            return ;
        }
        indexListFixed.style.display = "block";
        for(var i = 0; i < indexLists.length - 1; i++){
            if(y >= indexLists[i].offsetTop
            && y < indexLists[i+1].offsetTop){
                setNav(i);
                indexListFixed.innerHTML = indexLists[i].children[0].innerHTML;
                return;
            }
        }
        setNav(indexLists.length - 1);
        indexListFixed.innerHTML = indexLists[indexLists.length - 1].children[0].innerHTML;
    });
    function setIndex(y){
        let index = getIndex(y);
        if(index < 0
        || index > 9){
            return ;
        }
        indexList.scrollToElement(indexLists[index],100);
    }
    function setNav(index){
        indexListNavs.forEach((li)=>{
            li.classList.remove("active");
        });
        indexListNavs[index].classList.add("active");
    }
    function getIndex(y){
        let navT = indexListNav.getBoundingClientRect().top;
        let h = 18;
        let index = parseInt((y-navT)/18);
        return index;
    }

</script>
</body>
</html>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 1 条评论 - H5移动端

  1. 苏晨 Linux Chrome 53.0.2785.134

    学习学习 🙂 🙂

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线