前端开发使用Swiper制作webapp菜单栏切换
摘要： 前端开发主流浏览器差异 前端开发者浏览器 手机浏览器 前端开发 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <……
| 前端开发主流浏览器差异 |
| 前端开发者浏览器 |
| 手机浏览器 前端开发 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>使用Swiper制作webapp菜单栏切换</title>
<meta
name=”viewport”
content=”width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”
/>
<link
rel=”stylesheet”
type=”text/css”
/>
<style>
body {
min-width: 320px;
max-width: 640px;
margin: 0 auto;
color: #333;
padding: 0;
font-family: ‘Microsoft Yahei’;
text-align: center;
}
.container {
width: 100%;
border: 1px solid #ccc;
}
.swiper1 {
width: 100%;
}
.swiper1 .selected {
color: #ec5566;
border-bottom: 2px solid #ec5566;
}
.swiper1 .swiper-slide {
text-align: center;
font-size: 16px;
height: 50px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
}
.swiper2 {
width: 100%;
}
.swiper2 .swiper-slide {
height: calc(100vh – 50px);
background-color: #ccc;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class=”container”>
<!– swiper1 –>
<div class=”swiper-container swiper1″>
<div class=”swiper-wrapper”>
<div class=”swiper-slide selected”>推荐</div>
<div class=”swiper-slide”>菜单 2</div>
<div class=”swiper-slide”>菜单 3</div>
<div class=”swiper-slide”>菜单 4</div>
<div class=”swiper-slide”>菜单 5</div>
<div class=”swiper-slide”>菜单 6</div>
<div class=”swiper-slide”>菜单 7</div>
<div class=”swiper-slide”>菜单 8</div>
<div class=”swiper-slide”>菜单 9</div>
<div class=”swiper-slide”>菜单 10</div>
</div>
</div>
<!– swiper2 –>
<div class=”swiper-container swiper2″>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”>内容 1</div>
<div class=”swiper-slide”>内容 2</div>
<div class=”swiper-slide”>内容 3</div>
<div class=”swiper-slide”>内容 4</div>
<div class=”swiper-slide”>内容 5</div>
<div class=”swiper-slide”>内容 6</div>
<div class=”swiper-slide”>内容 7</div>
<div class=”swiper-slide”>内容 8</div>
<div class=”swiper-slide”>内容 9</div>
<div class=”swiper-slide”>内容 10</div>
</div>
</div>
</div>
<script>
$(function() {
function setCurrentSlide(ele, index) {
$(‘.swiper1 .swiper-slide’).removeClass(‘selected’)
ele.addClass(‘selected’)
//swiper1.initialSlide=index;
}
var swiper1 = new Swiper(‘.swiper1’, {
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 10,
freeMode: true,
loop: false,
onTab: function(swiper) {
var n = swiper1.clickedIndex
alert(1)
},
})
swiper1.slides.each(function(index, val) {
var ele = $(this)
ele.on(‘click’, function() {
setCurrentSlide(ele, index)
swiper2.slideTo(index, 500, false)
//mySwiper.initialSlide=index;
})
})
var swiper2 = new Swiper(‘.swiper2’, {
direction: ‘horizontal’,
loop: false,
autoHeight: true,
onSlideChangeEnd: function(swiper) {
var n = swiper.activeIndex
setCurrentSlide($(‘.swiper1 .swiper-slide’).eq(n), n)
swiper1.slideTo(n, 500, false)
},
})
})
</script>
</body>
</html>
感觉Swiper用做轮播蛮多的，突然发现这样组合也可以。
因为是基于jQuery的库，所以如果webapp是用jQuery库开发的应该可以用到吧。
| 前端开发所用测试浏览器 |
| 前端开发用那个浏览器 |
| 前端开发常用浏览器 |
» 本文来自：前端开发者 » 《前端开发使用Swiper制作webapp菜单栏切换》
» 本文链接地址：https://www.rokub.com/6864.html
» 您也可以订阅本站：https://www.rokub.com
近期评论