佳宸学习和分享笔记的地方

0%

swiper组件使用

swiper组件使用


引入 vue-awesome-swiper 的两种方式

  • 全局引入

可以直接使用全局引入,引入代码如下:

1
2
3
4
5
6
7
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)
  • 以组件形式引入

这种方式是在需要的页面以component 的形式引入,好处就是依赖性不强。

1
2
3
4
5
6
7
8
9
10
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
components: {
swiper,
swiperSlide
}
}

一个简单的轮播图

新建一个swiperDefault.vue文件。写入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
Slide {{item}}
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css"
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
data() {
return {
slide: [1, 2, 3, 4, 5, 6],
swiperOption:{
swiperOption:{
// 滑动最后页进入第一页
loop:true,
pagination:{
el:'.swiper-pagination',
// 可以点击
clickable:true
}
}
}
};
},
components: { swiper, swiperSlide }
};
</script>
<style scoped>
.swiper-slide {
height: 4rem;
text-align: center;
padding-top: 3rem;
border-bottom: 1px solid #ccc;
}
</style>

代码写好后,在.vue文件里进行引入使用。

1
import swiperDefault from '../swiper/swiperDefault'

然后注册组件,其实上节课的代码也是可以封装成一个component的。

1
components:{swiper,swiperSlide,swiperDefault},

注册好后,直接在template里使用就可以了.

1
<swiperDefault></swiperDefault>

1568809332660

竖屏切换效果

在配置项里直接配置direction就可以了,配置竖屏代码如下。

1
2
swiperOption:{
direction:'vertical',

区域滚动效果

加入上划下拉的组件,在一定区域内局部可以滚动,如文章,或者广告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
<div>
<swiper class="swiper" :options="swiperOption">
<swiper-slide class="text">
<div>大段文章...</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css"
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
data() {
return {
swiperOption:{
// 竖屏滚动
direction:'vertical',
// 一屏之内swiperslide数量
slidesPerView: 'auto',
// 滑动不自动贴合
freeMode: true,
// 鼠标滚轮控制
mousewheel:true
}
}
},
components: { swiper, swiperSlide }
}
</script>
<style scoped>
.swiper{
height: 300px;
overflow: hidden;
}
.text{
font-size:18px;
text-align: left;
padding: 30px;
height: auto;
box-sizing: border-box;

}
</style>

更多效果请访问swiper 官方API,手写原生js轮播图请看我的淘宝静态首页项目