swiper 多个循环的实现
swiper 最好要一一对应,最好与id关联。
new Swiper('#guess .swiper-container', {
pagination: '#guess .swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 10
});
当循环产生多个列表时,就要实现一一对应了。
<volist name="categoryData" id="vo" key="k">
<div class="right-2" id="F{sh:$k}">
<div class="head">
<i class="ski">F{sh:$k}</i>
<span class="title">{sh:$vo.name}</span>
<a href="{sh::U('Mall/storelist',array('mid'=>$mid,'category_id'=>$vo['id'],'cate_type'=>$vo['type'],'subtitle'=>mb_substr($vo[name],0,4,'utf-8')))}">更多〉</a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<volist name="vo.goodslist" id="goods">
<div class="swiper-slide">
<a href="{sh::U('Goods/info',array('token'=>$goods['token'],'id'=>$goods['goods_id'],'shop_id'=>$goods['shop_id']))}" class="url">
<div class="img"><img src="{sh::RES}/mall/img/rex.png" class="pinup"><img src="{sh::RES}/mall/img/rex.png" class="pinup"><img alt="" src="{sh:$goods.logoimg}"></div>
<div class="info">
<h5 class="name">{sh:$goods.goods_name|mb_substr=0,4,'utf-8'}</h5>
<div class="info_inner">
<div class="price">¥{sh:$goods.price}</div>
<div class="">
</div>
</div>
</div>
</a>
</div>
</volist>
</div>
</div>
</div>
<script type="text/javascript">
new Swiper('#F{sh:$k} .swiper-container', {
pagination: '#F{sh:$k} .swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 10
});
</script>
</volist>
这里巧妙的运用了#F{sh:$k}。
实现了一一对应的关系。