vue-awesome-swiper 使用方法
程序员文章站
2024-03-25 12:46:52
...
vue版的swiper 配置和swiper一样的
index.vue
<swiper :options="swiperOption" style="width: 1643px;left: -19px;top: -21px;">
<swiper-slide v-for="(item,index) in workAssistant" :key="index" >
<div style="overflow:hidden;width:300px;height:90px;border-radius:10px;background:#ffffff" v-if="item.path == ''">
<div style="float:left" >
<img :src="item.url" :alt="item.alt" :title="item.title" style="margin-top: 24px;margin-left: 21px;">
</div>
<div style="float:right">
<p style="margin-top: 20px;margin-bottom: 10px;"><strong>{{item.counts}}</strong></p>
<p style="margin-right:17px;">{{item.container}}</p>
</div>
</div>
<div style="overflow:hidden;width:300px;height:90px;border-radius:10px;background:#ffffff;cursor: pointer" v-if="item.path != ''" @click="addTabs(item.name,item.path)">
<div style="float:left" >
<img :src="item.url" :alt="item.alt" :title="item.title" style="margin-top: 24px;margin-left: 21px;">
</div>
<div style="height: 90px;display: flex;align-items: center;justify-content: center;">
<p style="margin-right:17px;font-size: 16px">{{item.container}}</p>
</div>
</div>
</swiper-slide>
//滚动条
<div class="swiper-scrollbar" slot="scrollbar" id="swiper-scrollbar"></div>
</swiper>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default{
components:{
swiper,swiperSlide,
}
data:{
return{
swiperOption: { // swiper 配置
slidesPerView: 5,
spaceBetween: -11,
scrollbar: { // 滚动条设置
el: ".swiper-scrollbar",
dragSize: 100
}
},
}
}
}
<style>
.swiper-container-horizontal > .swiper-scrollbar {
left: 0% ;
}
.swiper-scrollbar-drag{
background: #16d2ff ;
height: 9px ;
top: -2px;
}
.swiper-slide {
width: 200px;
height: 150px;
}
</style>