1.一个页面引用多个swiper插件,出现混乱问题;

  解决方法: 1.实例化swiper时加上其父元素加以区分

        2.Swiper加上ID或Class区分,要保留默认的类名swiper-container

  如下:

            <script>
var swiper = new Swiper('.course_banner2 .swiper-container', {
pagination: '.course_banner2 .swiper-pagination',
paginationClickable: true,
loop: true,
autoplay:
});
</script>

2. swiper隐藏之后,再显示,滑动不流畅,且无限滑动会失败;

  解决方法: 添加一下两个属性   

    observer: true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents: true,//修改swiper的父元素时,自动初始化swiper

3.动态生成的swiper,如append(),或html()添加的,无限滑动效果失败;

  解决方法:

    a. 添加上面两个属性

    b.把swiper方法写在动态生成的方法里面

  如下所示:

  

function bigPic(comment_id) {
$('.win_pic').show();
$.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){
if(data.status == ){
$("#content").text(data.comment.c_content);
$(".swiper-wrapper").html('');
var html = '';
var images = data.comment.images;
for (var i=; i < images.length; i++) {
html += "<div class='swiper-slide'><img src=__ROOT__/" + images[i]['thumb_image'] + "></div>";
}
$(".swiper-wrapper").html(html); //swiper已动态生成
//实例化swiper
var swiper = new Swiper('.nav .swiper-container', {
pagination: '.nav .swiper-pagination',
paginationClickable: true,
centeredSlides: true,
autoplay: false,
autoplayDisableOnInteraction: false,
paginationType: 'fraction',
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
loop: true,
paginationFractionRender: function(swiper, currentClassName, totalClassName) {
return '<span class="' + currentClassName + '"></span>' +
'/' +
'<span class="' + totalClassName + '"></span>';
}
})
}
console.log(data);
}, "json"); }

4.移动端使用swiper需加onTouchStart、onTouchEnd,下拉时轮播停止BUG。(针对 apicloud 开发)

   

var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
loop: true,
paginationClickable: true,
centeredSlides: true,
autoplay: ,
autoplayDisableOnInteraction: false,
onTouchStart: function(swiper) {
api.setFrameAttr({
name: api.frameName,
bounces: false
});
},
onTouchEnd: function(swiper) {
api.setFrameAttr({
name: api.frameName,
bounces: true
});
}
});

5.vue.js   v-for 中动态加载的swiper无效

HTML:

方法: vue里面本身带有两个回调函数:
  一个是Vue.nextTick(callback),当数据发生变化,更新后执行回调。
  另一个是Vue.$nextTick(callback),当dom发生变化,更新后执行的回调。

在数据更新后初始化  swiper

 

swiper.js 碰到的坑的更多相关文章

  1. 那些在BAE上部署node.js碰到的坑

    在BAE上使用node.js半年多了,其中碰到了不少因为BAE云环境限制碰到的坑 写下来大家碰到了,也不用那么麻烦的去看好几天代码了,直接对症下药 官方公布的坑有: BAE是使用package.jso ...

  2. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  3. iScroll.js和swiper.js

    最近系统地学习了iScroll.js和swiper.js,感觉它们在移动端特别好用:http://www.360doc.com/content/14/0724/11/16276861_39669990 ...

  4. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  5. 移动端开发(四):swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  6. 移动端无法复制:使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  7. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  8. Node.js的那些坑——如何让异步并发方法同步顺序执行(for循环+异步操作)

    1 前言 nodejs的回调,有时候真的是让人又爱又恨的,当需要用for循环把数据依次存入数据库,但是如果使用正常的for循环,永远都是最后一次值的记录,根本不符合要求. 解决此方案有几种,例如闭包( ...

  9. Swiper.js使用及API介绍

    Swiper.js详细使用教程http://www.swiper.com.cn/api/start/2014/1218/140.html

随机推荐

  1. ThinkPHP框架之空控制器

      HOME代表的是模块  前台可以用Home 后台用Admin   Model View Controller  统称为MVC   Model  是数据模型 主要是和数据库打交道的  View代表显 ...

  2. H5万能选择器:iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  3. 取消input默认样式

    有时候input在页面中被聚焦后会出现默认的边框样式,可以通过以下方法取消去除 .input:focus{ outline: none;}

  4. input元素之间的融合

    将两个input融合在一起,注意input标签之间的空格 .put1{ width: 20px; height: 28px; vertical-align:middle; border: 1px so ...

  5. 深入浅出理解yield

    索引 转载部分内容来自:http://www.jianshu.com/p/d09778f4e055 [彻底理解yield] http://blog.csdn.net/haskei/article/de ...

  6. vue视频学习笔记04

    video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm ins ...

  7. 学习MVC之租房网站(八)- 前台注册和登录

    在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...

  8. 【Python 函数对象 命名空间与作用域 闭包函数 装饰器 迭代器 内置函数】

    一.函数对象 函数(Function)作为程序语言中不可或缺的一部分,但函数作为第一类对象(First-Class Object)却是 Python 函数的一大特性. 那到底什么是第一类对象(Firs ...

  9. VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

    当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这 ...

  10. Mac和Windows系统下Mysql数据库的导入导出

    最近在构建数据库的过程中,需要将Mac os系统下的Mysql数据库导出成.sql文件,然后导入到windows系统下的Mysql中.经过学习总结出的步骤如下: 一.Mac os导出Mysql数据库 ...