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。之后我找了很多，才找到套用两层的方法，外层横向，内层竖向，就可以完美解决以上问题。