使用 data 赋值才能动态传数据,否则使用另一篇文章 “ swiper组件 ”
注意:这里使用 “ vue-awesome-swiper ” 组件,一定要用 v- if 判断数据,否则不加载!
<template>
<div class="swiperHandClass">
<swiper v-if="omsg.length" :options="swiperOptions">
<swiper-slide v-for="(item, index) in omsg" :key="index" class="swiper-slide">
<img :src="item.partnerLogo" alt="" />
</swiper-slide>
</swiper>
</div>
</template>
<script>
//导入样式
import "swiper/swiper-bundle.min.css";
// 导入swiper组件
import {
Swiper,
SwiperSlide
} from "vue-awesome-swiper";
// 使用swiper6的模组扩展
import SwiperCore, {
Navigation,
Controller,
Autoplay
} from "swiper";
//注册模块
SwiperCore.use([Navigation, Controller, Autoplay]);
export default {
name: "SwiperDemo",
components: {
Swiper,
SwiperSlide
},
props: ["omsg"],
computed: {
this_lisdeNum() {
return this.omsg;
}
},
data() {
return {
swiperOptions: {
loop: true,
spaceBetween: 20,
grabCursor: true,
slidesPerView: "auto", //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
centeredSlides: true //设定为true时,
}
};
}
};
</script>
<style lang="less">
.swiperHandClass {
.swiper-slide {
width: 100px !important;
height: 100px !important;
// margin: 0 8px;
border-radius: 50%;
overflow: hidden;
opacity: 0.5;
img {
width: 100%;
height: 100%;
}
}
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-active {
opacity: 1;
}
}
</style>