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

H5移动端

2018-08-31 分类：HTML5 作者：管理员 阅读（1888）

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

swiper.js

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

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

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

swiper-banner

示例：

banner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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（公告）

示例图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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切换

示例图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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手册

上下拉回弹效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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>

监听上下拉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!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

    学习学习 🙂 🙂

    2018-09-12 19:55 回复

博客简介

博主：Rookie_fly        职业：前端码农 工具类 - rutils.js 日期类 - rdate.js 掘金 npm github uniapp插件 vue组件

最近更新

随机文章

技术相关

阿里CDN CDN大全 百度统计 百度收录 关键词排名 经典Css片段 时间戳格式化 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试

精彩评论

友情链接

都是网虫，共勉之！申请交换友链

服务热线：
 177****6038

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息