TA的每日心情 | 奋斗 2017-9-14 15:43 |
---|
签到天数: 2 天 [LV.1]初来乍到
新手上路
- 积分
- 28
|
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;
}
|
|