uniapp 实现3d轮播图，也就是中间的放大两边的缩小 用swiper和swiper-item就能实现

话不多说，直接上代码，无需引入外部资源， 用swiper和swiper-item就能实现

先上结构代码

<swiper class="header" circular previous-margin="80rpx" next-margin="60rpx" :current="current"
@change="changeIndex">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<!-- 当前所在滑块的 index == index 放大 -->
<view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
<image :src="item.url" style="width: 100%;height: 76%;">
</image>
<view class="" style="padding: 0 20rpx;">
<view class=""
style="display: flex; color: #000;font-weight: 600;height: 60rpx;align-items: center;justify-content: space-between;">
<view class="">
{{item.title}}
</view>
<image
src="https://haowu.shenzhenlinghang.com/uploads/20240924/0e234868d2cff972a73c8299b4f6d7a7.png"
mode="heightFix" style="height: 50rpx;"></image>
</view>
<view class="innnerbox">
<view class="inner1">
<view class="inner2" style="width: 70%;height: 100%;background-color: #6ac4b0;border-radius: 15rpx;">

</view>
</view>
<view class="">
已抢{{item.count}}份
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>

 下面是css部分

.header {
box-sizing: border-box;
width: 100%;
height: 452rpx;

// margin: 50% auto;
background-color: #e9f4f2;
color: #fff;
border-radius: 10rpx;
margin-bottom: 50rpx;

.slide-image {
width: 600rpx;
height: 452rpx;
background: #fff;
border-radius: 10rpx;

.innnerbox {
margin-top: 10rpx;
height: 20rpx;
align-items: center;
display: flex;
color: #64c1ad;
font-size: 24rpx;
justify-content: space-between;

.inner1 {
width: 70%;
background-color:#e7f6f3;
height: 100%;
border-radius: 15rpx;
}
}
}

.active {
// 中间放大动画
transform: none;
transition: all 0.2s ease-in 0s;
}

.quiet {
// 两边缩小动画
transform: scale(0.95);
opacity: 0.4;
transition: all 0.5s ease-in 0s;
}
}

还有最关键的js部分代码

const bannerList = ref([{
url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/deba83e41e2823b2ae91fd54c9c6a701.png',
count: 5000,
title: '万益蓝品牌 折扣盛世来袭'
},
{
url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/580881703835073e3a03a79659e77cb5.png',
count: 5001,
title: '万益蓝品牌 折扣盛世来袭'
},
{
url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/deba83e41e2823b2ae91fd54c9c6a701.png',
count: 5002,
title: '万益蓝品牌 折扣盛世来袭'
}
])

const current = ref(0)
const changeIndex = (e) => {
// console.log(e.detail.current, 'e.detail.current');
current.value = e.detail.current
}

swiper的属性不懂的可以去看swiper | uni-app官网

原文地址：https://blog.csdn.net/qq_35452726/article/details/142488540

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！