有个新需求,做一个轮播图,但是需要轮播到中间的时候,中间放大. 是采用uniapp开发的小程序 下面贴代码和效果图哈

代码块:

<view class="con-part2-con">
    <swiper class="swiper-tall" :autoplay="true" :interval="3000" :duration="1000"
        circular='true' previous-margin='260rpx' current='0' @change="partSwiperChange">
        <swiper-item class="con-part2-con-container"
            v-for="(item,index) in partSwiperChangeList" :key="index">
            <view :class="['slide-image', partcurrentIndex === index?'active':'']"
                :style="{background:'url('+ item.pic +') center no-repeat',backgroundSize:'100%'}">
                <view class="part2-con-title">{{item.title}}</view>
                <view class="part2-con-img">
                    <image :src="item.img" class="img"></image>
                </view>
                <image :src="item.txt1Img" class="part2-con-txt1-img"></image>
                <view class="part2-con-txt2">
                    {{item.txt2}}
                </view>
            </view>
        </swiper-item>
    </swiper>
</view>

.con-part2-con {
    width: 100%;
    height: 390rpx;

    .swiper-tall {
        display: flex;
        align-items: center;
        height: 388rpx;

        .con-part2-con-container {
            display: flex;
            align-items: center;
            width: 50% !important;

            .slide-image {
                height: 305rpx;
                width: 223rpx;
                z-index: 1;
                margin: 0 auto;
                padding-top: 12rpx;

                .part2-con-title {
                    text-align: center;
                    font-size: 22rpx;
                    font-family: PingFangSC;
                    font-weight: 400;
                    color: #3596F1;
                }

                .part2-con-img {
                    margin-top: 13rpx;
                    width: 133rpx;
                    height: 136rpx;
                    margin: 0 auto;

                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .part2-con-txt1-img {
                    display: block;
                    margin: 10rpx auto 0rpx;
                    height: 28rpx;
                    width: 170rpx;
                }

                .part2-con-txt2 {
                    text-align: center;
                    font-size: 20rpx;
                    font-family: PingFangSC;
                    font-weight: 500;
                    color: #FFFFFF;
                    width: 121rpx;
                    margin: 20rpx auto 0rpx;
                }
            }

            .active {
                transform: scale(1.14);
                transition: all 0.2s ease-in 0s;
                z-index: 20;
            }
        }
    }
}

partSwiperChange(event) {
    this.partcurrentIndex = event.detail.current
}

partSwiperChangeList: [{
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量800份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize3.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img3.png',
        txt2: 'xxxx'
    }, {
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量100份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize1.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img2.png',
        txt2: 'xxxx'
    },
    {
        pic: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con1.png',
        title: '限量500份',
        img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-con-prize2.png',
        txt1Img: 'https://xxxxxxxxxx/images/newHome-0718/0718-con-part2-img1.png',
        txt2: 'xxxx'
    },
],
partcurrentIndex: 0,