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

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

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

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

2.（全局注册）

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9

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

4.template文件：

1
2
3
4
5
6
7

<div class="swiper-container" v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide">
//单个选项卡内容
</div>
</div>
</div>

5.js文件

1
2
3
4
5
6
7
8

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

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

结束！