微信小程序 卡片轮播

<!-- 卡片轮播容器 -->
<view class="swiper-container">
  <swiper 
    circular 
    previous-margin="100rpx" 
    next-margin="100rpx"
    autoplay="true"
    interval="2000"
    duration="500"
    bindchange="swiperChange"
    style="height: {{swiperHeight}}rpx">
    
    <block wx:for="{{cardList}}" wx:key="id">
      <swiper-item>
        <!-- 单个卡片 -->
        <view 
          class="card {{activeIndex === index ? 'active' : ''}}"
          bindtap="handleCardTap"
          data-id="{{item.id}}">
          <!-- 卡片内容 -->
          <image src="/images/{{item}}" mode="scaleToFill" class="card-image" />
          <view class="card-title">{{item.title}}</view>
        </view>
      </swiper-item>
    </block>
  </swiper>
  
  <!-- 自定义指示器 -->
  <view class="indicator">
    <block wx:for="{{cardList}}" wx:key="id">
      <view 
        class="dot {{activeIndex === index ? 'active' : ''}}"
        style="width: {{activeIndex === index ? '40rpx' : '20rpx'}}">
      </view>
    </block>
  </view>
</view>

Page({
  data: {
    cardList: [
      "1.png","2.png","3.png","4.png","5.png"
    ],       // 卡片数据
    activeIndex: 0,     // 当前激活索引
    swiperHeight: 900  // 动态高度
  },
  onLoad() {
    
  },
  // 切换回调
  swiperChange(e) {
    this.setData({ activeIndex: e.detail.current })
  },
  // 卡片点击
  handleCardTap(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
})

/* 容器样式 */
page{
  background-color: #333;
}
.swiper-container {
  position: relative;
  padding: 40rpx 0;
}
/* 卡片基础样式 */
.card {
  height: 800rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 0rpx 30rpx rgba(0,0,0,0.1);
  overflow: hidden;
  transform: scale(0.9);
  transition: all 0.4s ease;
  opacity: 0.6;
  animation: cardEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 激活卡片样式 */
.card.active {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 0rpx rgba(0, 243, 33, 0.7);
  
}
/* 卡片图片 */
.card-image {
  width: 100%;
  height: 800rpx;
}
/* 卡片标题 */
.card-title {
  padding: 30rpx;
  font-size: 32rpx;
  color: #333;
}
/* 自定义指示器 */
.indicator {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
}
.dot {
  height: 8rpx;
  margin: 0 8rpx;
  background: rgba(0,0,0,0.2);
  border-radius: 4rpx;
  transition: all 0.3s ease;
}
.dot.active {
  background: #007AFF;
}
/* 添加入场动画 */
@keyframes cardEnter {
  0% {
    transform: translateY(100%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.6;
  }
}