移动端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了,问题得到解决;

 

 

 
   

 

 

 

 

 

 

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

 

点击打开链接

 

你可能感兴趣的:(javascript)