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. windows10UWP:Segoe MDL2 图标指南

    windows10 UWP 开发中,图标的使用非常广泛.为此,微软建议大家使用 Segoe MDL2 Assets 字体来获取图标.Segoe MDL2 Assets 包括了哪里图标,微软在 http ...

  2. post get

    /// <summary> /// Get方法 /// </summary> /// <param name="serverUrl">url地址 ...

  3. html 新元素

    html5新元素 html5语义元素 <header> 定义了文档或者文档的一部分区域的页眉 <nav> 定义了导航链接的部分 <section> 定义了文档的某个 ...

  4. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  5. 让ie6/7/8兼容css3的圆角阴影等特殊效果的方法 PIE1.0.0及placeholder在这些IE下生效的方法

    PIE地址:http://css3pie.com/ 使用方法1: #login,#AnnouncementBox {  border:3px solid #fff;  -webkit-border-r ...

  6. iOS中常用的正则表达式

    iOS常用正则表达式 正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5]评注:匹配中文还真是个 ...

  7. Javascript基础(2)

    开始更咯~~~嘻嘻. ---------------------------------------------------------------------------------- 异常捕获:即 ...

  8. WF学习笔记(一)

    -流程启动方式1: WorkflowInvoker.Invoke(new Workflow1()); -流程启动方式2: WorkflowApplication instance = new Work ...

  9. Javascript中null值,特别注意的两点

    null 是一个javascript字面量,表示空值,就是没有对象被呈现.他是javascript原始值之一.null值常被放在期望一个对象上,但是不引用任何对象的参数位置,也就是说对象的初始化. 我 ...

  10. 百度分享 ajax 或分页后显示不出问题解决方案

    自从用了AJAX后,JS重新加载问题就如家常便饭般层出不穷啊.没有系统学习过js感觉亚历山大. 百度后,还是找到了解决办法. 百度分享创建了一个全局对象window._bd_share_main.通过 ...