文章链接: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