使用微信小程序实现页面滑动特效

<swiper class="swiper" indicator-dots="{{indicatorDots}}" indicator-active-color="{{indicatorColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imageUrls}}" wx:key="url">
    <swiper-item>
      <image src="{{item}}" class="image"></image>
    </swiper-item>
  </block>
</swiper>

.swiper {
  width: 100%;
  height: 400rpx; /* 自定义高度 */
}

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

Page({
  data: {
    imageUrls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ],
    indicatorDots: true, // 是否显示指示点
    indicatorColor: "#ffffff", // 指示点颜色
    autoplay: true, // 是否自动播放
    interval: 3000, // 自动切换时间间隔
    duration: 500 // 动画时长
  }
})

<swiper class="swiper" indicator-dots="{{indicatorDots}}" indicator-active-color="{{indicatorColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">

Page({
  // ...
  swiperChange(e) {
    console.log('当前页面索引：', e.detail.current)
  }
})