效果预览：
运用了vue-awesome-swiper和antdv组件库 antdv组件库参考文档:折叠面板 Collapse - Ant Design Vue (antdv.com) 代码：
<template>
<div id="container">
<h1>综合预警</h1>
<div
class="table-wrapper"
:style="{
height: `312px`,
}"
>
<div class="table-content">
<swiper class="swiper" :options="swiperOption" ref="myBotSwiper">
<swiper-slide v-for="(item, index) in 20" :key="index">
<a-collapse accordion>
<a-collapse-panel
:key="index"
:header="index"
:class="index % 2 ? 'activeClass' : ''"
>
<p>{{ text }}</p>
</a-collapse-panel>
</a-collapse>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
name: "SwiperTable",
components: {
Swiper,
SwiperSlide,
},
directives: {
swiper: directive,
},
computed: {
myBotSwiper() {
return this.$refs.myBotSwiper.$swiper;
},
},
data() {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
currentActiveRow: 0,
swiperOption: {
autoHeight: true,
direction: "vertical",
spaceBetween: 0,
slidesPerView: "auto",
grabCursor: true,
autoplayDisableOnInteraction: false,
mousewheelControl: true,
},
};
},
methods: {
handleRowClick(it, i) {
this.currentActiveRow = i;
},
// 控制表格停止滚动
swiperStop() {
this.myBotSwiper.autoplay.stop();
},
// 控制表格开始滚动
swiperStart() {
this.myBotSwiper.autoplay.start();
},
},
watch: {
data() {
this.currentActiveRow = 0;
},
},
};
</script>
<style lang="less" scoped>
.ant-collapse {
border: none;
.ant-collapse-item {
background: #0b2383;
border: none;
&.activeClass {
background: linear-gradient(to right, #0396d2, #10328c);
}
}
}
/deep/.ant-collapse > .ant-collapse-item > .ant-collapse-header {
height: 30px;
line-height: 3px;
}
/deep/.ant-collapse-content {
background: #ccc;
border-top: none;
}
.table-wrapper {
width: 100%;
height: 497px;
span {
box-sizing: border-box;
}
.table-content {
width: 100%;
height: 300px;
.swiper {
width: 100%;
height: 100%;
}
}
span {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
&:nth-child(1) {
color: #fff;
}
&:nth-child(2) {
color: #fff;
}
&:nth-child(3) {
color: #129388;
}
}
}
#container {
padding: 12px 8px;
color: #fff;
h1 {
color: #fff;
}
}
</style>
