移动端swiper.js中的坑------你怎能错过！！！！

文章链接：http://www.tecwant.com

 

最近有个移动端日历的项目，要求有以下几点：
1，触屏左右切换；
2，点击上方按钮左右切换；
3，触屏和点击上方按钮是同步的；（如下图：点击上面的‘9月’，是可以切换当当前月，触屏滑动日历也是可以切换的）

 

 

步骤：

1，渲染日历：日历是自己开发的（注意几点：1，获得当前日期；2，一个月多少天；3，闰月情况；4，每个月1号是礼拜几；。。。）

2，因项目比较近，所以采用了swiper.js控件来做滑动效果；

 

问题：

 

1，首先遇到的是在ios上测试是没有问题的，包括UC，百度等浏览器；不过在魅族，华为手机上测试出现问题了-----不能来回切换；

解决方法：考虑到应该是兼容性问题，于是乎查找swiper.js官方文档，因为当时只是引用了swiper.js，而没有引入swiper.css和swiper.animate.js；

重新引入后，ok了，问题得到解决；

 

 

<link rel="stylesheet" href="../../styles/library/swiper.min.css"/> <script src="../../scripts/common/swiper-3.3.1.min.js"></script> <script src="../../scripts/common/swiper.animate.min.js"></script> 

 

 

 

 

 

 

2，引入需要的文件后，发现ios和安卓浏览器是没有问题的，但是，安卓app里又出现问题了，来回切换不流畅，此时自己也是百度了一下，没有找到解决方法
最后还得看官方文档，查看属性和方法

解决方案：

 

 // 轮播图--左右滑动和切换
    var mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        loop:false,
        mode: 'horizontal',
        freeMode:false,
        touchRatio:0.5,
        longSwipesRatio:0.1,
        threshold:50,
        followFinger:false,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        onSlideChangeEnd:function(swiper){ // 当滑动结束后---月份日期切换同步左右左右切换
            changeMonth();
        }
    });

 

 

 

 

 

 

注意：初始化的时候添加的这几个属性，有不明白的可以查看官方文档；

温馨提示：swper.js我用的3xxx版本以上的，各个版本差别还是挺大的！

 

另外，推荐大家下载个每日一淘，技术栈 RN ！扫描下面的二维码，

附上 公司官方邀请码：e3mgq4o9

 

 

更新下：现在已经把这个项目放到我github上了，只是一个简单的demo，大家可以看下

https://hzaini1989.github.io/project/inde.html

 

点击打开链接