移动端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

 

点击打开链接

 

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值