vue-awesome-swiper上下滚动
时间: 2023-11-28 10:44:07 浏览: 93
以下是使用vue-awesome-swiper实现上下滚动的方法:
1.首先安装swiper和vue-awesome-swiper插件:
```shell
npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save
```
2.在需要使用的组件中引入swiper和vue-awesome-swiper:
```javascript
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
```
3.在组件中使用swiper和vue-awesome-swiper:
```html
<template>
<div class="swiper-container" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list" :key="index">{{ item }}</div>
</div>
<div class="swiper-pagination" slot="pagination"></div>
</div>
</template>
<script>
export default {
components: {
swiper, swiperSlide
},
data() {
return {
list: ['第一条公告', '第二条公告', '第三条公告', '第四条公告', '第五条公告']
}
},
mounted() {
this.$nextTick(() => {
new this.$swiper(this.$refs.mySwiper, {
direction: 'vertical',
autoplay: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
}
})
})
}
}
</script>
<style>
.swiper-container {
height: 200px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #fff;
}
.swiper-pagination-bullet-active {
background-color: #fff;
}
</style>
```
4.在上面的代码中,我们使用了swiper的direction属性来设置滚动方向为垂直方向,同时使用了autoplay和loop属性来实现自动播放和循环播放。我们还使用了pagination属性来添加分页器,使用户可以手动切换公告。
阅读全文