查看: 1758|回复: 0
打印 上一主题 下一主题

slideToClickedSlide 在IOS中 点击串位置,怎么回事?

[复制链接]
  • TA的每日心情
    奋斗
    2017-9-14 15:43
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    4

    帖子

    28

    积分

    新手上路

    Rank: 1

    积分
    28
    跳转到指定楼层
    楼主
    发表于 2017-9-13 17:19:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    RT
    slideToClickedSlide 在IOS中 点击串位置,怎么回事?  页面效果类似 京东APP 首页中的—— 发现好店——页面的滑动导航
    JS代码
    function swiperNav(){
            var mySwiper2 = new Swiper('.banner_box',{
                    slideToClickedSlide:true,
                    roundLengths : true,
                    slidesPerView : 'auto',
                    freeMode : true,
            })
    }

    HTML 代码

    <div class="banner_box">
                            <div class="banner swiper-wrapper" id="top_nav_slide">
                                    <span class="swiper-slide red_bacol" id="trigger1">家用电器</span>
                                    <span class="swiper-slide " id="trigger2">家具厨具</span>
                                    <span class="swiper-slide"  id="trigger3">个护美妆</span>
                                    <span class="swiper-slide"  id="trigger4">潮流女装</span>
                                    <span class="swiper-slide"  id="trigger5">运动户外</span>
                                    <span class="swiper-slide"  id="trigger6">医药保健</span>
                                    <span class="swiper-slide"  id="trigger7">图书</span>
                                    <span class="swiper-slide"  id="trigger8">食品生鲜</span>
                                    <span class="swiper-slide"  id="trigger9">鞋靴箱包</span>
                                    <span class="swiper-slide"  id="trigger10">手机数码</span>
                                    <span class="swiper-slide"  id="trigger11">母婴童装</span>       
                                    <span class="swiper-slide"  id="trigger12">电脑办公</span>
                                    <span class="swiper-slide"  id="trigger13">品牌男装</span>
                                    <span class="swiper-slide"  id="trigger14">酒水饮料</span>
                                    <span class="swiper-slide"  id="trigger15">内衣配饰</span>
                                    <span class="swiper-slide"  id="trigger16">家居家装</span>
                                    <span class="swiper-slide"  id="trigger17">玩具乐器</span>
                                    <span class="swiper-slide"  id="trigger18">汽车用品</span>
                                    <span class="swiper-slide"  id="trigger19">奢品礼品</span>
                                    <span class="swiper-slide"  id="trigger20">钟表珠宝</span>
                                    <span class="swiper-slide"  id="trigger21">全球购</span>
                                    <span class="swiper-slide"  id="trigger22">生活旅行</span>
                                    <span class="swiper-slide"  id="trigger23">特产馆</span>
                                    <span class="swiper-slide"  id="trigger24">音乐</span>
                                    <span class="swiper-slide"  id="trigger25">教育</span>
                                    <span class="empty_box swiper-slide"></span>
                            </div>
                    </div>

    CSS代码
    .banner_box{
            width: 100%;
            height: 2.8rem;
            background: #0C0C0C;
            overflow: hidden;
            position: fixed;
            top: 2.5rem;
            z-index: 20;
    }
    .banner{
            width:auto;
            height: 2.8rem;       
            color: white;
            line-height: 2.8rem;
            position: relative;
    }
    .banner>span{
            display: inline-block;
            height: 2.8rem;
            padding: 0 0.7rem;
    }
    .swiper-slide{
            width: auto !important;
    }

    .empty_box{
            display: inline-block;
            width: 40px !important;
    }



    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-24 07:29 , Processed in 0.123298 second(s), 27 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表