vue項目引入swiper上下切換

一、安裝swiper：npm install swiper

二、在入口文件main.js引入swiper樣式： import  "swiper/dist/css/swiper.css" 或者import  "swiper/css/swiper.css"

注意：在這裏需要注意，swiper版本不一樣引入的方式也會有所不同，比如npm install swiper安裝的版本是"swiper": "5.2.1",這時候打開node_modules 發現沒有dist這一級目錄了，所以這時候的引入方式就是import  "swiper/css/swiper.css"，看具體css的存放位置

如果想引入之前存在dist目錄的swiper插件，就需要安裝swiper的另外版本，比如："swiper": "4.4.2",這時候在node_modules中會存在dist目錄，直接import  "swiper/dist/css/swiper.css"引入就可以了

三、在你需要實現輪播的模塊組件中去引入swiper： import Swiper from "swiper";

四、我們列舉一個移動端上下輪播的案例

比如有四個需要輪播的模塊，我們創建四個.vue文件，.vue組件裏面具體就是你自己的頁面了，然後使用vue的<component :is="xxx"></component>的方式動態引入這需要輪播的八個模塊組件

實現方法如下：

1、dom結構

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(val,index) in componentList">
                    <component :key="index" :is="val"></component>
                </div>
            </div>
        </div>

 

2、script中引入.vue文件

import Swiper from "swiper";

var componentList = {
        componentOne: require ('./components/one.vue').default,
        componentTwo: require ("./components/two.vue").default,
        componentThree: require ('./components/three.vue').default,
        componentFour: require ("./components/four.vue").default
};

3、data中定義

data () {
     return {
          componentList: ['componentOne', 'componentTwo', 'componentThree', 'componentFour'],
      }
},

4、components中註冊組件

components: componentList,

5、初始化swiper

mounted () {
            this.initSwiper ();
        },
methods: {
       initSwiper () {
                mySwiper = new Swiper (".swiper-container", {
                    centeredSlides: true,
                    initialSlide: 0, //設定初始化時slide的索引
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true
                    },
                    direction: 'vertical',//水平(horizontal)或垂直(vertical)
                    watchOverflow: true,//因爲僅有1個slide，swiper無效
                    scrollbar: {
                        el: '.swiper-scrollbar',//自動隱藏
                    },
                    preventClicks: false,//當swiper在觸摸時阻止默認事件（preventDefault），用於防止觸摸時觸發鏈接跳轉。
                });
                mySwiper.on ('slideChange', () => {
                    //this.swiperContainer.activeIndex; 當前切換的組件索引index
                });
            },
        },
}

6、如果有向下提示切換的箭頭，點擊之後去下一頁，實現方法是：

mySwiper.slideTo (mySwiper.activeIndex + 1, 500, false);

//mySwiper.activeIndex 當前索引，切換到下一個 ，所以+1
//500 切換的過度時間

好了，這樣vue就可以正常使用swiper了，具體內部的其他配置可以查看swiper官方文檔：https://www.swiper.com.cn/api/index.html

 

交流

可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！歡迎關注公衆號共同學習。