快捷導(dǎo)航

在vue-cli項(xiàng)目中如何使用swiper

更新時(shí)間：2023年07月05日 15:25:05 作者：吳莉

這篇文章主要介紹了在vue-cli項(xiàng)目中如何使用swiper問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

在vue-cli項(xiàng)目中使用使用swiper

第一步

切換進(jìn)項(xiàng)目安裝swiper

npm install swiper --save-dev

第二步

創(chuàng)建組件 swiper.vue

導(dǎo)入

import Swiper from "swiper";
@import 'swiper/dist/css/swiper.css';

完整swiper.vue組件

<template>
?? ?<div>
?? ??? ?<div class="swiper-container">
?? ??? ??? ?<div class="swiper-wrapper">
?? ??? ??? ??? ?<div class="swiper-slide">Slide 1</div>
?? ??? ??? ??? ?<div class="swiper-slide">Slide 2</div>
?? ??? ??? ??? ?<div class="swiper-slide">Slide 3</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</template>

<script>
?? ?import Swiper from "swiper";
?? ?export default{
?? ??? ?name:"swiper",
?? ??? ?mounted(){
?? ??? ??? ?var mySwiper = new Swiper ('.swiper-container', {
?? ??? ??? ?}) ? ? ? ?
?? ??? ?}
?? ?}
</script>

<style>
?? ?@import 'swiper/dist/css/swiper.css';
?? ?.swiper-container {
?? ??? ?width: 600px;
?? ??? ?height: 300px;
?? ?} ?
</style>

在vue-cli中使用swiper制作水平滑動(dòng)

在最近項(xiàng)目中，需要完成一個(gè)水平滑動(dòng)選項(xiàng)卡的選擇，如果在uni-app中可以直接使用swiper組件完成，但是在vue-cli項(xiàng)目中需要進(jìn)入swiper插件；但是swiper官網(wǎng)中對于其在vue-cli項(xiàng)目中的使用介紹描述的不太詳細(xì)，下面將我的使用過程記錄下來供大家參考。

1.引入npm install swiper vue-awesome-swiper --save

2.（全局注冊）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 如果引入版本 (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// 如果引入版本 (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.頁面內(nèi)注冊：

import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; //輪播插件
import "swiper/swiper-bundle.css";
components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },

4.template文件：

<div class="swiper-container" v-swiper:mySwiper="swiperOption">
         <div class="swiper-wrapper">
                <div class="swiper-slide">
                //單個(gè)選項(xiàng)卡內(nèi)容
                 </div>
         </div>
 </div>

5.js文件

export default{
  data(){
   swiperOption: {
        slidesPerView: 4,//配置每列顯示幾個(gè)選項(xiàng)卡，如果為4，代表100%寬度下會顯示4張選項(xiàng)卡，第五個(gè)選項(xiàng)需要滑動(dòng)才能看到
        // ...其他配置項(xiàng)參考swiper中文網(wǎng)
      },
  }
}

此時(shí)，頁面中的選項(xiàng)卡就可以水平滾動(dòng)該插件也可以用來做滾動(dòng)導(dǎo)航Nav，如圖：

在這里插入圖片描述