1:安装插件
npm i [email protected] --save
2:注意事项
注意:我安装的是,2.6.7低版本的,只适用于此版本
如果遇到问题,可从github上寻找答案。下面链接是针对此版本的使用介绍
https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7
如果您遇到了其他问题,可以先到此路径下的issue中进行寻找答案。
3:dmeo源码
<template>
<div class="home homeIndex">
<div class="home_24shi_content">
<div class="home_24shi_content_t1">
<div class="home_24shi_content_t1_title">swiper数据切换展示</div>
<div class="home_24shi_content_t1_library">
<swiper class="swiper" :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<swiper-slide>Slide 11</swiper-slide>
<swiper-slide>Slide 12</swiper-slide>
<swiper-slide>Slide 13</swiper-slide>
<swiper-slide>Slide 15</swiper-slide>
<swiper-slide>Slide 14</swiper-slide>
<swiper-slide>Slide 14</swiper-slide>
<swiper-slide>Slide 14</swiper-slide>
<swiper-slide>Slide 14</swiper-slide>
</swiper>
<div class="swiper-pagination" slot="pagination"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: "HomeView",
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
slidesPerView: 6,
slidesPerColumn: 2,
spaceBetween: 14,
slidesPerGroup: 6,
paginationClickable: true,
loopFillGroupWithBlank: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
pagination: '.swiper-pagination',
}
}
},
mounted() {
},
methods: {
onChangeShi(e) {
this.isActive = e;
}
}
};
</script>
<style lang="scss">
.homeIndex {
.swiper-pagination {
margin-top: 50px;
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
}
.swiper-pagination-bullet {
width: 52px;
margin: 0 10px;
height: 4px;
background: #867f6f;
border-radius: 2px;
}
.swiper-pagination-bullet-active {
background: #CEC3A7 !important;
}
}
</style>
<style lang="scss" scoped>
.homeIndex {
width: 1200px;
margin: 0 auto;
}
.swiper {
margin-bottom: 50px;
position: relative;
margin-top: 25px;
height: 500px;
margin-left: auto;
margin-right: auto;
.swiper-slide {
height: 237px;
background: red;
}
}
.home_24shi_content {
margin-top: 50px;
.home_24shi_content_t1 {
.home_24shi_content_t1_title_t2 {
font-size: 16px;
margin-top: 22px;
color: #6B6B6B;
}
.home_24shi_content_t1_title {
color: #1B1B1B;
font-weight: 600;
font-size: 22px;
}
}
}
.home_24shi {
margin-top: 55px;
display: flex;
justify-content: center;
height: 142px;
.home_24shi_nav {
cursor: pointer;
width: 155px;
// border-left: 1px solid #B39F7B;
text-align: center;
&:last-child {
border-right: 1px solid #B39F7B;
}
.active {
width: 19px;
height: 19px;
border-radius: 50%;
margin: 9px auto;
background: #B39F7B;
}
.home_24shi_nav_p1 {
width: 52px;
line-height: 58px;
text-align: center;
border-radius: 50%;
height: 52px;
font-size: 35px;
background: #B39F7B;
color: #FFF;
margin: 25px auto 10px auto;
}
.home_24shi_nav_p2 {
font-size: 22px;
color: #837648;
}
}
}
.home_h1 {
margin-top: 45px;
font-size: 18px;
.p2 {
margin-top: 8px;
color: #6B6B6B;
}
.p1 {
font-weight: 800;
color: #2E2E2E;
}
}
.home_title {
position: relative;
span {
position: absolute;
color: #FFF;
font-size: 59px;
}
.title1 {
left: 474px;
top: 35px;
}
.title2 {
left: 569px;
top: 35px;
}
.title3 {
left: 663px;
top: 35px;
}
}
</style>
4:效果展示
5:功能介绍:
改demo 可以支持点击下方按钮进行页面数据切换展示 以及 可以根据鼠标滑动来进行切换数据展示