Vue實現左右滑動內容區控制導航tab同時切換高亮

  Vue如何實現左右滑動內容區控制導航tab同時切換高亮，實現的效果是：點擊導航按鈕時內容區發生改變，左右滑動內容區時導航按鈕跟隨切換高亮，停留在某個內容區時刷新頁面後仍然停留在當前內容區。

        這裏涉及到幾個點：

                1.左右滑動，那就須要用到swiper，固然你能夠本身寫一個相似的功能，雖然不難可是項目開發中可能會比你引入插件要耗時不少；

                2.Vue開發鼓勵組件化，因此在這我是分爲nav和swiper兩個組件，那麼就要用到事件發射與接收，我在前面的博文有關於事件發射與接收的心得， 具體點擊查看；

                3.利用vue路由和動態組件實現模板加載，切換和刷新頁面停留在當前內容區；

        實現的效果以下圖所示：

 

 

        開始具體的代碼實現：

        一.在main.js設置路由相關數據，以下圖所示：

        編寫app.vue的代碼，以下圖所示：

        二.咱們先實現點擊導航按鈕時內容區發生改變。

 

            1.導航組件的靜態模板很簡單，以下圖所示：

          2.swiper組件的靜態模板，首先要引入swiper，下載swiper的js和css文件放入static文件夾，在swiper組件中引入，以下圖所示：

  

          3.同時在eslintrc.js文件中加入紅框中代碼，以下圖所示：

 

          4.此時已引入swiper插件，咱們須要讓連接路徑與slide的內容區的模板文件保持同步，這裏經過路由獲取連接地址控制swiper的初始slide索引initialSlide便可實現，以下圖第61行所示。

 

          5.通常狀況下內容區咱們會作成獨立的模板進行動態導入，傳統js能夠運用iframe框架引入模板文件，angular能夠運用ng-include指令引入模板文件，那麼vue用什麼呢，vue用動態組件的方式引入，官網有詳細解說我就不解釋了， 具體查看。swiper組件靜態模板代碼以下圖所示：

        此時swiper組件已經完成，能夠自由滑動，其中one、two、three、four、five是動態載入的模板文件。

 

        6.前期工做已經完成，因爲咱們是在兩個組件間進行交互，因此點擊導航按鈕時須要將當前導航按鈕的index傳給swiper組件，而後利用swiper插件的slideTo方法跳轉到相應的內容區，因此在 nav組件的tabClick方法中加入發射事件，以下圖所示：

        7.而後在 swiper組件添加接收方法，以下圖所示：

        此時已經實現點擊導航按鈕時內容區發生改變的效果。

 

        三.實現左右滑動內容區時導航按鈕跟隨切換高亮。

            1.左右滑動內容區時利用swiper插件的on方法監控slideChange屬性,當滑動slide後將當前activeIndex傳給nav組件，因此在 swiper 組件加入發射事件，以下圖紅框所示：

           2.而後在 nav組件添加接收方法，以下圖紅框所示：

           3.此時已經實現左右滑動內容區時導航按鈕跟隨切換高亮。可是咱們刷新頁面會發現連接路徑與導航按鈕的高亮並不一致，是由於咱們導航按鈕初始索引nowIndex爲0，因此咱們須要經過路由獲取連接地址賦值給nowIndex實現刷新頁面後連接路徑與導航按鈕同步，以下圖紅框所示：