swiper bugs if multi swipers exit

swiper 控件当动态添加时候,会导致混乱。

源码没详细看,笔者猜测可能是每次初始化都有一个唯一ID,所以无法捕捉销毁。

一.常用失败解决方案:

①destroy()变量

②reInit()方法似乎也不起作用,笔者引用的swiper3.4.2,找不到此方法。

二.成功方案(js操作数组):

swiper has bugs if init many times, so we should init it once only.(初始化一次)

var exist=false;
var Idarray=[‘index‘];
for (var i = 0; i < Idarray.length; i++) {
    if (Idarray[i] == showedId) {
        exist = true;
        console.log(‘exist already‘);
        return;
    }
}
//only init when it doesn‘t exist.
if (!exist) {
    Idarray.push(showedId);
    console.log(Idarray);
    new Swiper(‘#‘ + showedId + ‘-swiper‘, {
        pagination: ‘.swiper-pagination‘,
        paginationType: ‘fraction‘
    });
}
时间: 2024-07-30 20:41:48

swiper bugs if multi swipers exit的相关文章

Swiper 中文API手册(share)

翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有

angularjs中使用轮播图指令swiper

我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件路径 <link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /> <script src="../bower_components/s

Redis 的数据类型 - MULTI 事务,SORT 排序

开启事务 MULTI:开启事务,事务块中的多条语句会按照顺序放入对列当中,最后由EXEC命令来执行 MULTI INCR counter1 #当实物开启后执行命令时不会直接返回结果而是先加入到执行队列中# INCR counter2 INCR counter3 PING GET counter1 执行事务块中的命令 EXEC #执行事务块中的命令# 127.0.0.1:6379> MULTI OK 127.0.0.1:6379> INCR counter1 QUEUED 127.0.0.1:6

Swiper说明&amp;&amp;API手册

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(na

Swiper Usage&amp;&amp;API

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的用户体验. 特征(feature)1

Swiper API

本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速

Swiper 中文API手册(转自挨踢前端)

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(n

Swiper说明&amp;&amp;API手册 【中文手册Swiper】

 原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加

idangerous swiper

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的用户体验. 特征(feature)1.