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

最新推荐文章于 2025-06-23 10:51:41 发布

原创最新推荐文章于 2025-06-23 10:51:41 发布 · 7.8k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #轮播图

微信小程序专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在轮播图中实现图片放大效果的方法，通过在轮播到当前图片时应用一个放大样式来增强视觉体验。使用了swiper组件并结合wxss进行样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理其实就是获取当前轮播的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,
  })
},

本篇博客旨在记录了自己在前端编程过程中碰到的一部分问题，如有错误的地方欢迎指正