uniapp横屏移动端卡片缩进轮播图

uniapp横屏移动端卡片缩进轮播图

效果：

代码：

<!-- 简单封装轮播图组件:swiperCard -->
<template><swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="10000" :duration="500"previous-margin="70rpx" next-margin="70rpx" @change="change"><swiper-item v-for="(item, i) in 5" :key="i"><view class="swiper-item uni-bg-red" :class="i === swiperIndex ? 'active' : ''">A</view></swiper-item></swiper>
</template><script>export default {data() {return {swiperIndex: 0}},methods: {change(e) {// console.log(e.target.current);this.swiperIndex = e.target.current;}}}
</script><style lang="scss" scoped>.swiper {height: calc(100vh - 150rpx);width: 100%;.swiper-item {background-color: pink;height: calc(100vh - 200rpx);width: calc(100vw - 180rpx);border-radius: 10rpx;margin-top: 10rpx;}// 轮播图当前激活的样式.active {height: calc(100vh - 170rpx);margin-top: 0rpx;transition: all .2s ease-in 0s;}}
</style>