vue+實現（移動端、PC端）滑動切換頁面（swiper）

vue+Swiper實現頁面滑動切換

   效果圖如下：

         

1. 安裝swiper4  

npm install swiper

   2.vue中引入

      首先在main.js文件中引入swiper的css文件。

import "swiper/dist/css/swiper.min.css";

   然後對於swiper組件，在組件中引入，也可以全局引入，但是按需引入比較好。

import Swiper from "swiper";

     3.swiper使用

          簡單說一下swiper的使用，首先需要創建一個swiper對象，對對象進行實例化就可以實現就基礎的輪播效果。

      注：在瀏覽器的手機調式模式中，是看不到swiper在移動端的效果，所以必須在真機或者模擬器中才能看到。

 <div class="containers" slot="container">

         //使用swiper,注意這個的class名不能修改，需要寫樣式，就用這個class名進行重寫
        <div class="swiper-container "   id="swiper_tab"  ref="mySwiper" >
       
          <div class="swiper-wrapper" >
            <div class="swiper-slide slidepage"  >
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">
                    <Attention/>//我這裏是引用自己寫的組件
                  </div>
                </div>
              </div>
            </div>

            <div class="swiper-slide slidepage"  >
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">
                    <Find/>
                  </div>
                </div>
              </div>
            </div>

            <div class="swiper-slide slidepage"  >
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">
                    <Recommend/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<script>
import Swiper from "swiper";
export default {
    data: function() {
        return {
         
        }
    },
 
    mounted() {
      this.$nextTick(() =>{
        this.establish_swiper();
      this.establish_swiper_scroll();
      });
},

 methods: {

  establish_swiper_scroll(){//創建swioper滾動的區域對象
        var scrollSwiper = new Swiper('.scroll', {
          direction: 'vertical',//方向豎直
          freeMode: true,//開啓自由模式
          slidesPerView: 'auto',
          mousewheel: {
            releaseOnEdges: true
          }
        })
      },
      establish_swiper(){
           var _this=this;//區別開data中的this和swiper中的this
        var swiper= new Swiper("#swiper_tab", {//通過id來區分swiper對象
          initialSlide: 1,//初始化顯示第幾個，從o開始
          resistanceRatio: 0,//取消邊緣的反彈效果
          watchSlidesProgress: true,
          on: {
            transitionStart: function() {//滑動動畫開始時，
              if (this.realIndex== 0) {
                _this.active1 = "attention";//我這裏是實現滑動時tab導航隨之改變
              }
              else if(this.realIndex==1){
                _this.active1="find";
              }
              else if(this.realIndex==2){
                _this.active1 = "recommend";
              }
            }
          }
        });

},
 computed: {
      swiper(){
        return this.$refs.mySwiper.swiper;//全局使用swiper對象，使用時直接this.swiper.方法
      }
    },
}

</script>

     說明一下上面代碼中，爲何要套用兩層，因爲本人在做APP時發現，如果只用一層，在瀏覽器上運行是可以的，但是在手機上運行時，會產生滑動不流暢，卡頓以及在向下滑時，直接滑動了頁面，進行切換的Bug。之後我找了很多，才找到套用兩層的方法，外層橫向，內層豎向，就可以完美解決以上問題。