整理下自己写H5时常用的库或是框架,以便自己熟记在心。
swiper.js
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
swiper-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
>
横向滑动
示例图:

<!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>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
学习学习 🙂 🙂