小程序swiper使用示例

好的，下面是小程序swiper组件的使用示例：

在wxml中添加swiper组件的代码：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" vertical="{{vertical}}" bindchange="swiperChange">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="100%" height="100%" mode="aspectFill"></image>
    </swiper-item>
  </block>
</swiper>

在js中设置swiper组件的参数和数据源：

Page({
  data: {
    indicatorDots: true, // 是否显示面板指示点
    autoplay: true, // 是否自动切换
    interval: 5000, // 自动切换时间间隔
    duration: 1000, // 滑动动画时长
    circular: true, // 是否采用衔接滑动
    vertical: false, // 滑动方向是否为纵向
    imgUrls: [
      'https://www.example.com/image1.jpg',
      'https://www.example.com/image2.jpg',
      'https://www.example.com/image3.jpg'
    ]
  },
  swiperChange:function(e){
    console.log(e.detail.current)
  }
})

其中imgUrls为图片的链接数组，swiperChange为swiper组件的滑动事件，打印出当前的图片索引值。

希望能够解答您的疑问，有其它问题可以继续咨询。