H5移动端

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

整理下自己写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>

<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>



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



<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>

</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) 打赏