先上效果图
依旧是面对百度编程,在vue中使用swiper最重要的就是用对版本,npm i 了几个版本后有各种细节问题,最后找到最佳组合
vue-awesome-swiper@3.1.3
swiper@4.5.1
npm install swiper@5.3.6 --save
npm i vue-awesome-swiper@3 -S
页面按需引入
html代码
<swiper class="mySwiper" :options="swiperOption" ref="mySwiper">
<!-- 添加的图片 -->
<swiper-slide>
<div class="active_font">永宁今日完成落地上图</div>
<div>46亩</div>
</swiper-slide>
<swiper-slide>
<div class="active_font">同心今日完成落地上图</div>
<div>46亩</div>
</swiper-slide>
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
</swiper>
js代码
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
components: {
swiper,
swiperSlide,
},
data() {
return {
swiperOption: {
loop: true,
// observer: true, //修改swiper自己或子元素时,自动初始化swiper
// observeParents: true, //修改swiper的父元素时,自动初始化swiper
slidesPerView: 3,
slideToClickedSlide: true, //设置为true则点击slide时会在这个slide产生过渡
centeredSlides: true,
autoplay: {
delay: 1000,
pauseOnMouseEnter:true
},
spaceBetween: 1,
direction: "vertical",
on: {
//这里是点击事件,按需求来
},
},
}
}
做完后,其中最麻烦的其实css,得一点一点调
css代码
.swiper-container {
height: 100px;
}
.swiper-wrapper .swiper-slide {
height: 36px !important;
display: flex;
align-items: center;
justify-content: space-between;
color: #bdb9b9;
}
/deep/.swiper-wrapper {
height: 36px;
width: 85%;
margin: 0 auto;
}
.swiper-slide {
width: 85%;
margin: 0 auto;
}
.swiper-wrapper,
.swiper-slide-active {
width: 100% !important;
color: #fff!important;
font-size: 16px;
padding-left: 20px;
background: url("~@/assets/img/left_icon.png") no-repeat;
background-position: -2px 8px;
right: 10px;
}
.swiper-wrapper,
.swiper-slide-active .active_font{
margin-left: 10px;
}