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}。

实现了一一对应的关系。

swiper 多个循环的实现的更多相关文章

  1. 解决问题:swiper动态加载图片后无法滑动

    原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动. 解决方案 1:在动态获 ...

  2. react中用swiper实现大图功能

    1.引入Swiper(用的是4.5.0版本)      import Swiper from 'swiper';      //引入样式,还可以加上自己的样式      import '../../s ...

  3. 69个微信小程序常见问题

    本文转自 遇到小程序方面的问题,该去哪里提问呢? 若是能得到微信官方的解答,想必是最叫人安心的.而微信也确实提供了这么一个地方. 在微信公众平台的开发者社区,就置顶了一个「小程序常见问题 FAQ」帖. ...

  4. vue2.0 之 douban (四)创建Swipe图片轮播组件

    swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...

  5. vue2.0 之 douban (六)axios的简单使用

    由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...

  6. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...

  7. swiper在vue项目中的循环轮播bug以及点击事件

    一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...

  8. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  9. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

随机推荐

  1. WWDC-UIKit 中协议与值类型编程实战

    本文为 WWDC 2016 Session 419 的部分内容笔记.强烈推荐观看. 设计师来需求了 在我们的 App 中,通常需要自定义一些视图.例如下图: 我们可能会在很多地方用到右边为内容,左边有 ...

  2. block没那么难(三):block和对象的内存管理

    本系列博文总结自<Pro Multithreading and Memory Management for iOS and OS X with ARC> 在上一篇文章中,我们讲了很多关于 ...

  3. oracle实现自动记录存储过程、自定义函数执行错误

    CREATE OR REPLACE Package Pkg_Stm_Prgerrlog As --Purpose: 实现记录系统错误异常信息,便于问题跟踪 Procedure Sp_Stm_Prger ...

  4. (总结)CentOS Linux搭建SVN Server配置详解

         PS:虽然在公司linux服务器上搭建过几次svn,但是时间长了,有些配置操作会忘掉,上网搜索的结果都不大满意,有幸在前几天看到一篇算是最满意的svn搭建文章,转载一下以备以后使用,原文地址 ...

  5. hdu 5073 Galaxy

    题意是给定n个点,让求找到一个点p使得sigma( (a[i] - p) ^ 2 ) 最小,其中a[i]表示第i个点的位置.其中有k个点不用算. 思路:发现这道题其实就是求n-k个点方差. 那么推一下 ...

  6. sql语句游标的写法

    当循环查找一张表的信息时,我们得写一张游标来对每条信息进行操作,具体格式如下 DECLARE @fitemid int DECLARE #point_cursor CURSORFORSELECT fi ...

  7. Looper Handler MessageQueue Message 探究

    Android消息处理的大致的原理如下: 1.有一个消息队列,可以往队列中添加消息 2.有一个消息循环,可以从消息队列中取出消息 Android系统中这些工作主要由Looper和Handler两个类来 ...

  8. [o] SQLite数据库报错: Invalid column C

    向SQLite数据库内新增列,之前出现过报错为提示no such column,通过删除并重建数据库文件解决,这次报错为无效的数据列: java.lang.IllegalArgumentExcepti ...

  9. VS2015使用OSChina的git功能

    好长时间没有写博了,把今天的新的记录一下. 最近开始使用vs2015,vs2015支持git平台和TF功能,因为....,我选择了OSChina的git.一开始学习的此篇文章http://my.osc ...

  10. 远程推送,集成极光的SDK,证书制造

    由于iOS操作系统限制,我们APP在后台不能做操作,也不能接收任何数据,所以需要用推送来接收消息. APNs服务,苹果官方网址:https://developer.apple.com/library/ ...