话不多说,直接上代码,无需引入外部资源, 用swiper和swiper-item就能实现
先上结构代码
html
<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部分
javascript
.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部分代码
javascript
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官网