yunshengtai-uniapp/components/vSwiper.vue

<template>
	<swiper class="swiper-block" vertical="true" circular="true" previous-margin="80rpx" next-margin="80rpx" current="0" @change="swiperChange">
			<block v-for="(item, index) in articleList" :key="index">
				<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg">	
					<view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)">
						<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image>
						<view class="content-box">
							<view class="mask"></view>
							<view class="title-box line1">{{item.title}}</view>
							<view class="content acea-row">
								<view>{{item.author}}</view>
								<view>{{item.createTime}}</view>
								<!-- <view class="acea-row row-middle">
									<image src="../static/images/eye2.png" class="eye"></image>
									<text>{{item.visit}}</text>
								</view> -->
							</view>
						</view>
					</view>
				</swiper-item>
			</block>
	</swiper>
</template>

<script>
	export default{
		props: {
			articleList: {
				type: Array,
				default: []
			}
		},
		data(){
			return {
				swiperIndex: 0
			}
		},
		methods: {
			swiperChange(e) {
			  const that = this;
			  that.setData({
			    swiperIndex: e.detail.current
			  });
			},
			toDetial(id){
				uni.navigateTo({
					url: '/pages/life/articleDetail/index?id='+id
				})
			},
			previewImg() {
			  uni.previewImage({
			    urls: this.imgs
			  });
			}
		}
	}
</script>

<style lang="less">
	.swiper-block {
		width: 670rpx;
	  height: 300rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		
	}
	  
	.swiper-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  overflow: unset;
	}
	.item-box{
		width: 600rpx;
		height: 230rpx;
		position: relative;
		border-radius: 20rpx;
	}
	.slide-image {
		width: 100%;
		height: 100%;
	  z-index: 1;
		border-radius: 20rpx;
	}
	.content-box{
		width: 556rpx;
		height: 100rpx;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		color: #0081FF;
		z-index: 5;
	}
	.mask{
		width: 100%;
		height: 100%;
		background:rgba(255,255,255,.5);
		filter: blur(1px);
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 12rpx;
	}
	.title-box{
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
		margin-bottom: 10rpx;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		z-index: 99;
	}
	.content{
		color: #000;
		font-size: 26rpx;
		position: absolute;
		top: 56rpx;
		z-index: 99;
		left: 10rpx;
	}
	.content view{
		margin-right: 50rpx;
	}
	.active {
	  // transform: scale(1.02);
		width: 670rpx;
		height: 256rpx;
	  transition: all 0.2s ease-in 0s;
		border-radius: 20rpx;
	  z-index: 20;
	}
	.eye{
		width: 24rpx;
		height: 24rpx;
	}
</style>