zoukankan      html  css  js  c++  java
  • 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}。
    实现了一一对应的关系。

  • 相关阅读:
    dataGridView 滚动条 同步
    TextBox 只读
    grid 数据绑定后
    iframe 跳转问题
    TextBox 不可编辑
    C# 添加Excel 批注、如何在Excel的单元格里面增加批注
    dataSet 比较
    sql 游标、sql server 游标使用、实例
    Tab键
    计算文本框的字算、计算TextBox的字数长度
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5290988.html
Copyright © 2011-2022 走看看