商城项目中商城分类页的右侧滑动效果实现1
1、没有采用swiper组件，而是自定义js组件itcast.iScroll 在组件中可以配置滑动的方向、可以配置滑动时最小滑动的有效距离；
2、swiper组件功能强大，可以将此组件集成到项目中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!-- meta:vp-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<title>分类</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/category.css"/>
<link rel="stylesheet" href="css/swiper.min.css">
<!-- <link rel="stylesheet" href="css/animate.css"/>-->
<style>
.swiper-container {
overflow: hidden;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* 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;
}
</style>
</head>
<body>
<!--顶部通栏-->
<header class="hm_topBar">
<a href="#" class="icon_back"></a>
<form action="#">
<input type="search" placeholder="分类搜索"/>
</form>
<a href="#" class="icon_menu"></a>
</header>
<!--分类盒子-->
<div class="hm_category">
<!--一级分类-->
<div class="hm_category_left">
<ul>
<li class=""><a href="javascript：;">热门推荐</a></li>
<li class="now"><a href="javascript：;">潮流女装</a></li>
<li class=""><a href="javascript：;">品牌男装</a></li>
<li class=""><a href="javascript：;">内衣配饰</a></li>
<li class=""><a href="javascript：;">家用电器</a></li>
<li class=""><a href="javascript：;">电脑办公</a></li>
<li class=""><a href="javascript：;">手机数码</a></li>
<li class=""><a href="javascript：;">母婴频道</a></li>
<li class=""><a href="javascript：;">图书</a></li>
<li class=""><a href="javascript：;">家居家纺</a></li>
<li class=""><a href="javascript：;">居家生活</a></li>
<li class=""><a href="javascript：;">家具建材</a></li>
<li class=""><a href="javascript：;">热门推荐</a></li>
<li class=""><a href="javascript：;">潮流女装</a></li>
<li class=""><a href="javascript：;">品牌男装</a></li>
<li class=""><a href="javascript：;">内衣配饰</a></li>
<li class=""><a href="javascript：;">家用电器</a></li>
<li class=""><a href="javascript：;">电脑办公</a></li>
<li class=""><a href="javascript：;">手机数码</a></li>
<li class=""><a href="javascript：;">母婴频道</a></li>
<li class=""><a href="javascript：;">图书</a></li>
<li class=""><a href="javascript：;">家居家纺</a></li>
<li class=""><a href="javascript：;">居家生活</a></li>
<li class=""><a href="javascript：;">家具建材</a></li>
</ul>
</div>
<!--二级分类-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
direction : 'vertical',
});
</script>
<script src="js/common.js"></script>
<script src="js/swipe.js"></script>
<script src="js/category.js"></script>
</body>
</html>
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻