黑马商城项目_商城分类页_右侧滑动1

最新推荐文章于 2020-06-23 16:27:40 发布

yinxiaoxin001

最新推荐文章于 2020-06-23 16:27:40 发布

阅读量479

点赞数 1

分类专栏： webapp教程文章标签：商城

本文链接：https://blog.csdn.net/u013060489/article/details/78611917

版权

webapp教程专栏收录该内容

13 篇文章 3 订阅

订阅专栏

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>

yinxiaoxin001

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
黑马商城项目_商城分类页_右侧滑动1

1、没有采用swiper组件，而是自定义js组件itcast.iScroll 在组件中可以配置滑动的方向、可以配置滑动时最小滑动的有效距离； 2、swiper组件功能强大，可以将此组件集成到项目中。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">  <meta name
复制链接

扫一扫

专栏目录