uniapp-swiper轮播图中间放大两边缩小

最新推荐文章于 2024-08-23 16:41:02 发布

陈十三13

最新推荐文章于 2024-08-23 16:41:02 发布

阅读量3.5k

点赞数 5

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_52852561/article/details/125876344

版权

有个新需求,做一个轮播图,但是需要轮播到中间的时候,中间放大. 是采用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,