chanyishenghuo-uniapp/components/sSwiper.vue

<template>
	<swiper class="swiper-block" circular="true" previous-margin="100rpx" next-margin="100rpx" current="0" @change="swiperChange">
		<swiper-item v-for="(item, index) in list" :key="index">
			<view class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @click="toDetail(item.id)">
				<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image>
				<view class="title line1">{{item.title}}</view>
				<view class="intro line2">{{item.synopsis}}</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default{
		props: {
			imgs: {
				type: Array,
				default: []
			},
			list: {
				type: Array,
				default: []
			}
		},
		data(){
			return {
				swiperIndex: 0
			}
		},
		methods: {
			swiperChange(e) {
			  this.swiperIndex = e.detail.current
			},
			toDetail(id){
				this.$yrouter.push({
				  path: '/pages/knowledge/detail',
				  query: {
				    id: id,
				  },
				})
			},
		}
	}
</script>

<style lang="less">
	.swiper-block {
	  width: 100%;
		height: 780rpx;
	}
	swiper-item{
		width: 100%;
		height: 780rpx;
	}
	.swiper-item {
		width: 420rpx;
		height: 740rpx;
		margin: 0 auto;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: flex-start;
	  overflow: unset;
		position: relative;
	}
	.slide-image {
	  width: 420rpx;
		height: 578rpx;
	  border-radius: 230rpx 230rpx 34rpx 34rpx;
		border: 1rpx solid #B67827;
	  z-index: 1;
	}
	.title{
		width: 420rpx;
		height: 96rpx;
		background: #B67827;
		color: #FFCB85;
		text-align: center;
		line-height: 96rpx;
		margin-top: -96rpx;
		padding: 0 12rpx;
		border-radius: 0rpx 0rpx 34rpx 34rpx;
		z-index: 99;
	}
	.intro{
		font-size: 28rpx;
		color: #222;
		margin-top: 20rpx;
	}
	.active {
	  transform: scale(1.1);
	  transition: all 0.2s linear;
	  z-index: 20;
		}
</style>