微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="/UploadFiles/2021-04-02/img1.png">

swiper组件属性说明如下：


  
    
      属性名
      类型
      默认值
      说明
      最低版本
    
  
  
    
      indicator-dots
      Boolean
      false
      是否显示面板指示点
      
    
    
      indicator-color
      Color
      rgba(0, 0, 0, .3)
      指示点颜色
      1.1.0
    
    
      indicator-active-color
      Color
      #000000
      当前选中的指示点颜色
      1.1.0
    
    
      autoplay
      Boolean
      false
      是否自动切换
      
    
    
      current
      Number
      0
      当前所在页面的 index
      
    
    
      interval
      Number
      5000
      自动切换时间间隔
      
    
    
      duration
      Number
      500
      滑动动画时长
      
    
    
      circular
      Boolean
      false
      是否采用衔接滑动
      
    
    
      vertical
      Boolean
      false
      滑动方向是否为纵向
      
    
    
      bindchange
      EventHandle
      
      current 改变时会触发 change 事件，event.detail = {current: current, source: source}
    
  




3、源代码点击此处本站下载。
关于swiper详细说明还可参考官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html


希望本文所述对大家微信小程序开发有所帮助。