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}。
实现了一一对应的关系。

posted @ 2016-03-18 10:13  TBHacker  阅读(7367)  评论(0编辑  收藏  举报