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}。
實現了一一對應的關系。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM