在vue-cli中使用swiper制作水平滑动

在vue-cli中使用swiper制作水平滑动

在最近项目中，需要完成一个水平滑动选项卡的选择，如果在uni-app中可以直接使用swiper组件完成，但是在vue-cli项目中需要进入swiper插件；但是swiper官网中对于其在vue-cli项目中的使用介绍描述的不太详细，下面将我的使用过程记录下来供大家参考。

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.页面内注册：

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">
                //单个选项卡内容
                 </div>
         </div>
 </div>

5.js文件

export default{
  data(){
   swiperOption: {
        slidesPerView: 4,//配置每列显示几个选项卡，如果为4，代表100%宽度下会显示4张选项卡，第五个选项需要滑动才能看到
        // ...其他配置项参考swiper中文网
      },
  }
}

此时，页面中的选项卡就可以水平滚动
该插件也可以用来做滚动导航Nav，如图：

结束！