小程序卡片式轮播图

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

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

58 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #轮播图 #缩放

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

8 篇文章

订阅专栏

博客展示了微信小程序轮播图缩放功能的相关代码，包含js文件代码、wxml代码以及wxss文件代码，还给出了效果图。

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

1、js文件代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640',
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动播放
    interval: 3000, //停留时间间隔
    duration: 1000, //播放时长
    previousMargin: '50px', //前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
    nextMargin: '50px', //后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
    circular: true, //是否采用衔接滑动
    currentSwiperIndex: 0, //swiper当前索引
  },

  swiperBindchange(e) {
    this.setData({
      currentSwiperIndex: e.detail.current
    })
  },
})

2、wxml代码如下：

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  previous-margin="{{previousMargin}}" 
  next-margin="{{nextMargin}}"
  circular="{{circular}}"
  bindchange="swiperBindchange"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image {{currentSwiperIndex == index ? 'zoom-in' : 'zoom-out'}}"/>
    </swiper-item>
  </block>
</swiper>

3、wxss文件代码如下：

swiper{
  margin-top: 50rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

.zoom-out {
  transform: scale(0.8);
  transition: all 0.7s ease-out 0s;
}

.zoom-in {
  transform: scale(1);
  transition: all 0.7s ease-in 0s;
}

效果图如下：