【微信小程序】中轮播图当前图放大效果

原理其实就是获取当前轮播的id ，并将其放大（active样式中可见），就是swiperIndex == index ? ‘active’ :
‘’，示例图片没有放轮播图，但是能看到效果

.wxml
<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx"
current="0" bindchange="swiperChange"> <block wx:for="{{Images}}"
wx:index="{{index}}"> <swiper-item class="swiper-item"> <image
mode="aspectFill" src="{{item.img_url}}" class="slide-image {{swiperIndex ==
index ? 'active' : ''}}"/> </swiper-item> </block> </swiper>
.wxss
.swiper-block{ height: 480rpx; width: 100%; } .swiper-item{ display: flex;
flex-direction: column; justify-content: center; align-items: flex-start;
overflow:unset; } .slide-image{ height:320rpx; width: 520rpx; border-radius:
9rpx; box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2); margin: 0rpx 30rpx; z-index:
1; } .active{ transform: scale(1.14); transition:all .2s ease-in 0s; z-index:
20; }
.js
轮播滑动时，获取当前的轮播id swiperChange(e) { const that = this; that.setData({
swiperIndex: e.detail.current, }) },
本篇博客旨在记录了自己在前端编程过程中碰到的一部分问题，如有错误的地方欢迎指正

• « 上一篇：ElasticSearch外网访问遇到的坑
• » 下一篇：EF Core in Action 中文翻译 第一部分导航