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

422101-20160318101236318-870665246.png



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5290988.html,如需转载请自行联系原作者

相关文章
|
5月前
|
小程序 JavaScript 容器
小程序的swiper组件
小程序的swiper组件
92 0
uni-app swiper实现公告栏上下循环滚动(整理)
uni-app swiper实现公告栏上下循环滚动(整理)
|
9月前
|
JavaScript
VUE swiper实现内容循环滚动
VUE swiper实现内容循环滚动
104 0
|
10月前
layui动态表格条件语句判断的方式
layui动态表格条件语句判断的方式
107 0
collapse中点击事件和for循环的添加
collapse中点击事件和for循环的添加
623 0
Flutter swiper在tab切换之后快速循环
Flutter swiper在tab切换之后快速循环
233 0
|
Web App开发 JavaScript 前端开发
使用swiper.js创建嵌套的swiper
相信在项目中使用过swiper.js的同学会跟我一样,觉得这个软件真的很好用。首先API调用简单,其次就是他的官方文档写得非常之详细,非常容易上手。 自己在项目中使用swiper.js很长时间了,这里根据自己的一些经验和心得对swiper.js进行总结。
2061 0
|
JavaScript 前端开发 数据格式