最近有個移動端日曆的專案，要求有以下幾點：
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版本以上的，各個版本差別還是挺大的！

更新下：現在已經把這個專案放到我github上了，只是一個簡單的demo，大家可以看下

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