vue3中使用Swiper8.1.4

6,292 阅读1分钟
  1. 安装

    npm i swiper
    
  2. 按官方使用用来引入(官方的引用路径终于正确了)

    <template>
      <swiper
        // 页面中一次显示几个图片
        :slides-per-view="3"
        // 轮播图之间的间距
        :space-between="50"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        ...
      </swiper>
    </template>
    <script>
      // Import Swiper Vue.js components
      import { Swiper, SwiperSlide } from 'swiper/vue';
    
      // Import Swiper styles
      import 'swiper/css';
    
      export default {
        components: {
          Swiper,
          SwiperSlide,
        },
        setup() {
          const onSwiper = (swiper) => {
            console.log(swiper);
          };
          const onSlideChange = () => {
            console.log('slide change');
          };
          return {
            onSwiper,
            onSlideChange,
          };
        },
      };
    </script>
    
  3. 个性化设置

    1. 五步走

      1. 引入模块
      2. 引入样式
      3. 返回模块
      4. 在swiper标签添加模块属性
      5. 在swiper标签设置样式属性(一些简单的)
    <template>
        <div class="container_header">
            <header class="header" id="HOME">
                <swiper
    		// 在swiper标签添加模块属性
                    :modules="modules"
    		// 垂直方向轮播 注意一定要有两对引号包裹
    		// :direction="'vertical'"
                    :slides-per-view="1"
    		// 滑动速度
                    :speed="1200"
    		// 开启循环
                    :loop="true"
                    // 轮播图之间的间距
                    :space-between="0"
                    @swiper="onSwiper"
                    @slideChange="onSlideChange"
    		// 设置自动播放样式属性
                    :autoplay="{ delay: 3000, disableOnInteraction: false }"
    		// 设置淡出样式效果
                    effect="fade"
                >
                    <swiper-slide>
                        <img src="@/assets/background.webp" alt="" />
                    </swiper-slide>
                    <swiper-slide>
                        <img src="@/assets/background_two.webp" alt="" />
                    </swiper-slide>
                    <swiper-slide>
                        <img src="@/assets/background_three.webp" alt="" />
                    </swiper-slide>
                </swiper>
            </header>
        </div>
    </template>
    
    <script>
    //  引入想要效果模块
    import { Autoplay, EffectFade } from 'swiper'
    import { Swiper, SwiperSlide } from 'swiper/vue'
    // 引入样式
    import 'swiper/css'
    import 'swiper/css/autoplay'
    import 'swiper/css/effect-fade'
    
    // 嫌麻烦,直接引入了所有 Swiper 样式,包括所有模块样式
    // import 'swiper/css/bundle'
    export default {
        components: {
            Swiper,
            SwiperSlide,
        },
        setup() {
            const onSwiper = (swiper) => {}
            const onSlideChange = () => {}
            return {
                onSwiper,
                onSlideChange,
    	// 返回模块
                modules: [Autoplay, EffectFade],
            }
        },
    }
    </script>
    
  4. 组件样式修改:

    1. 因为vue为了不让单页的样式污染全局,通常会在style标签加上scoped,这就导致了我们无法替换掉组件的样式,我们可以用::v-deep把样式抛出去替换到全局的,例如我们要把swiper的pagination页面小圆点改成白色。

      <style scoped>
      .swiper-slide {
        height: 300px;
        line-height: 300px;
        font-size: 30px;
        text-align: center;
        background-color: pink;
      }
      .swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
        background: rgb(255, 255, 255);
      }
      .swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
        background: rgb(255, 255, 255);
      }
      </style>
      
    2. 用预处理器例如sass可以用:deep()

      <style lang="scss" scoped>
      .swiper:deep() {
        .swiper-slide {
          height: 300px;
          line-height: 300px;
          font-size: 30px;
          text-align: center;
          background-color: pink;
        }
        .swiper-pagination {
          .swiper-pagination-bullet {
            background: rgb(255, 255, 255);
          }
          .swiper-pagination-bullet-active {
            background: rgb(255, 255, 255);
          }
        }
      }
      </style>