项目界面展示效果
使用 "vue-awesome-swiper": "^3.1.3"组件(最好对应版本)
npm install vue-awesome-swiper@3.1.3 --save
代码
<template>
<div class="lm-container">
<div class="lm-container-left"></div>
<div class="lm-container-right">
<div class="lm-container-right-title">人员抓拍</div>
<div class="lm-container-right-block" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="i in list" :key="i">
<take-capture />
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import TakeCapture from "./component/takeCapture.vue";
export default {
name: "LargeManager",
components: {
TakeCapture,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
loop: true,
direction: "vertical",
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false
},
slidesPerView: "auto",
// loopedSlides: 3,
//显示分页
// pagination: {
// el: ".swiper-pagination",
// clickable: true //允许分页点击跳转
// }
},
list: [1, 2, 3, 4, 5, 6]
};
},
mounted() {},
methods: {
on_bot_enter() {
this.$refs.mySwiper.swiper.autoplay.stop();
},
on_bot_leave() {
this.$refs.mySwiper.swiper.autoplay.start();
},
}
};
</script>
<style lang="less" scoped>
.lm-container {
display: flex;
height: 100%;
width: 100%;
&-left {
flex: 1;
}
&-right {
width: 600px;
padding: 0 20px;
&-title {
width: 80px;
height: 30px;
line-height: 30px;
font-size: 20px;
font-weight: bold;
color: #60c6d4;
}
&-block {
position: relative;
overflow: auto;
height: calc(100% - 40px);
.swiper-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.swiper-slide {
height: 200px;
}
}
}
}
</style>
注意设置高度
两个地方,设置.swiper-container和.swiper-slide的样式,
swiper-container为设置整体滚动区域,高度一定要设置
swiper-slide为设置单个的样式,高度一定要设置
注:如果您使用vue的话,建议用vue-seamless-scroll