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在移动端的效果，所以必须在真机或者模拟器中才能看到。

 


         //使用swiper,注意这个的class名不能修改，需要写样式，就用这个class名进行重写
        

       
          

            

              

                

                  

                    //我这里是引用自己写的组件
                  
                
              
            

            

              

                

                  

                    
                  
                
              
            

            

              

                

                  

                    
                  
                
              
            
          
        

     说明一下上面代码中，为何要套用两层，因为本人在做APP时发现，如果只用一层，在浏览器上运行是可以的，但是在手机上运行时，会产生滑动不流畅，卡顿以及在向下滑时，直接滑动了页面，进行切换的Bug。之后我找了很多，才找到套用两层的方法，外层横向，内层竖向，就可以完美解决以上问题。