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

swiper 多个循环的实现的更多相关文章
- 解决问题:swiper动态加载图片后无法滑动
原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动. 解决方案 1:在动态获 ...
- react中用swiper实现大图功能
1.引入Swiper(用的是4.5.0版本) import Swiper from 'swiper'; //引入样式,还可以加上自己的样式 import '../../s ...
- 69个微信小程序常见问题
本文转自 遇到小程序方面的问题,该去哪里提问呢? 若是能得到微信官方的解答,想必是最叫人安心的.而微信也确实提供了这么一个地方. 在微信公众平台的开发者社区,就置顶了一个「小程序常见问题 FAQ」帖. ...
- vue2.0 之 douban (四)创建Swipe图片轮播组件
swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...
- vue2.0 之 douban (六)axios的简单使用
由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...
- 用微信小程序做一个小电商 sku
效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...
- swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...
随机推荐
- 2 - SQL Server 2008 之 使用SQL语句为现有表添加约束条件
上一节讲的是直接在创建表的时候添加条件约束,但是有时候是在表格创建完毕之后,再添加条件约束的,那么这个又该如何实现? 其实,跟上一节所写的SQL代码,很多是相同的,只是使用了修改表的ALTER关键字及 ...
- onContextItemSelected 用法
http://blog.csdn.net/kavensu/article/details/8045041 onCreateOptionsMenu :此方法为创建菜单方法,这个菜单就是你在点击手机men ...
- js中浮点型运算 注意点
先看张图: 这是一个JS浮点数运算Bug,导致我树状图,数据合计不正确,,,,,,两个小数相加,出来那么多位小数 (这是修该之后的) 网上找到以下解决方式: 方法一:有js自定义函数 <sc ...
- mysql locktables
SELECT r.trx_id waiting_trx_id, r.trx_mysql_thread_id waiting_thread, TIMESTAMPDIFF( ...
- Linux系统swap已分区但无法挂载与cryptswap1问题
linux下察看swap分区大小的命令 top 或者fdisk -l 或者free -m SWAP分区一般大小为物理内存的2倍,但最大不超过2G; 增加SWAP空间的方法有两个:增加另外一个SWAP分 ...
- VisualStudio2015内置LocalDB
简直坑爹,我将之前的VS2013的工程迁移到新电脑的VS2015,然后用的本地数据库居然连接报错了,然后我试连了一下本地数据库, 就是Tools-->Connect to Databases-- ...
- UNIX 系统上的文本操作简介
http://www.oschina.net/question/129540_53561 UNIX 的基本哲学之一就是创建只做一件事并将这一件事做好的程序(或进程).这一哲学要求认真考虑接口以及结合这 ...
- js创建对象的三种方法:文本标识法和构造器函数法和返回对象的函数
文本标识法和定义变量差不多,像这样 var obj = {name:'HanMM','2':'Dali'}; 函数构造器法 先创建一个对象函数 function Obj() { this.addre ...
- mysql数据类型——时间类型
四种日期格式: 每个时间类型有一个有效值范围和一个"零"值,当指定不合法的MySQL不能表示的值时使用"零"值. YEAR 0000 YYYY ...
- web字体格式转换
@font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix' ...