vue左右滑动翻页效果
时间: 2023-07-04 16:24:06 浏览: 91
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
5星 · 资源好评率100%
你可以使用vue-awesome-swiper插件来实现左右滑动翻页效果。首先安装该插件:
```
npm install vue-awesome-swiper --save
```
然后在Vue组件中引入该插件并使用:
```
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in items" :key="index">
<h1>{{item.title}}</h1>
<p>{{item.content}}</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
items: [
{ title: 'Slide 1', content: 'Content 1' },
{ title: 'Slide 2', content: 'Content 2' },
{ title: 'Slide 3', content: 'Content 3' },
{ title: 'Slide 4', content: 'Content 4' },
{ title: 'Slide 5', content: 'Content 5' },
],
swiperOption: {
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
}
}
}
}
</script>
```
在上述代码中,我们将swiper和swiperSlide组件引入到Vue组件中,并使用v-for指令来遍历items数组中的项,生成swiper-slide。使用swiper-pagination类来显示分页器,并使用swiperOption对象配置swiper的选项。其中,loop:true表示循环播放,navigation和pagination选项用于指定前进/后退按钮和分页器的样式。
最后,我们需要在该组件的样式表中添加一些样式:
```
<style scoped>
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
</style>
```
这些样式用于设置swiper容器和swiper-slide的样式。
这样,你就完成了vue左右滑动翻页效果的实现。
阅读全文