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. 使用navicat 11 出现不能返回存储过程结果的问题

    问题: 使用navicat 11 调试存储过程,select返回结果,总是不能返回. 原因: 经google发现,navicat仅支持返回10个resultset,超过则不现实. 解决方法: 减少存储 ...

  2. UITableView的简单应用介绍

    创建一个tableView视图,然后把这个视图界面添加到主界面上. _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 20, [ ...

  3. HTTP协议 状态码详解

    http://www.cnblogs.com/TankXiao/archive/2013/01/08/2818542.html

  4. n进制转为十进制

    主程序代码 - #include <stdio.h> #include <string.h> main() { long t1; int i, n, t, t3; ]; pri ...

  5. (转)修改ECSHOP前后台的title中的ecshop

    前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ecshop 前者在后台商店设置 - 商店标题修改 后者打开includes/lib_main.php $page_t ...

  6. linux教程:配置Tomcat开机启动

    我们在linux下安装好tomcat之后:经常是需要配置到开机启动的: 这样的话就不需要我们每次重启linux服务器之后自己在登陆运行startup.sh文件启动tomcat了 本次的演示环境是在ce ...

  7. 实现多个ContentProvider对多张表进行操作

    http://blog.csdn.net/maylian7700/article/details/7365373 SQLite数据库直接操作类: DatabaseHelper.java package ...

  8. django连接已有的数据库

    以连接postgresql为例: 1.安装psycopg2,下载地址:http://www.stickpeople.com/projects/python/win-psycopg/ 2.配置setti ...

  9. javascript ~~ 符号的使用

    其实是一种利用符号进行的类型转换,转换成数字类型 大概是这样滴: ~~true == 1 ~~false == 0 ~~"" == 0 ~~[] == 0 ~~undefined ...

  10. Tensor神经网络进行知识库推理

    本文是我关于论文<Reasoning With Neural Tensor Networks for Knowledge Base Completion>的学习笔记. 一.算法简介 网络的 ...