微信小程序Swiper组件详解

一、Swiper组件介绍

Swiper是微信小程序中用于实现滑动屏幕的组件，能够轻松实现轮播图、图片展示、文字滚动等功能。Swiper支持自动播放、切换速度、指示器、手势滑动等多种配置选项。

二、Swiper组件的使用

1、在需要使用Swiper组件的页面的json配置文件中添加“usingComponents”字段：

{
  "usingComponents": {
    "swiper": "/components/swiper/swiper"
  }
}

2、在wxml文件中添加Swiper标签，其中包含一个Swiper-item标签：

3、在js文件中配置Swiper组件的选项：

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500
  }
})

三、Swiper组件的属性

Swiper组件有以下属性：

1、indicator-dots：是否显示面板指示点，true为显示，false为隐藏，默认为false。

2、autoplay：是否自动切换，true为自动切换，false为不自动切换，默认为false。

3、interval：自动切换时间间隔，单位为毫秒，默认为5000。

4、duration：滑动动画时长，单位为毫秒，默认为500。

四、Swiper组件事件

Swiper组件有以下事件：

1、bindchange：Swiper-item切换时触发。

示例代码：

   
  
    
    
     
  
    

   

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500
  },
  swiperChange: function (e) {
    console.log(e.detail.current)
  }
})

五、Swiper组件的应用场景

1、轮播图，可以将多张图片进行轮播展示。

2、图片展示，可将多张图片形成一个图集，突出图片展示效果。

3、文字轮播，可以将多个文字进行轮播展示，突出文字信息。

   
  
    
    
     这是第一条公告
     
  
    
  
    
    
     这是第二条公告
     
  
    
  
    
    
     这是第三条公告
     
  
    

   

六、Swiper组件样式

Swiper组件有以下样式：

1、swiper-class：指定整个Swiper组件的样式。

2、indicator-class：指定指示点样式。

3、indicator-active-class：指定当前展示指示点的样式。

示例代码：

.swiper-box {
  height: 200rpx;
  position: relative;
}

.swiper-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.swiper-text-box .text {
  font-size: 28rpx;
  color: #fff;
}

.swiper-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
}

.swiper-indicator .dot {
  width: 12rpx;
  height: 12rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 0 8rpx;
}

.swiper-indicator .dot-active {
  background-color: #fff;
}

七、Swiper组件的其他选项

其他常用选项介绍：

1、circular：是否采用衔接滑动效果，true表示采用，false表示不采用，默认为false。

示例代码：

2、vertical：是否垂直滑动，true表示垂直滑动，false表示水平滑动，默认为false。

示例代码：

   
  
    
    
     这是第一条公告
     
  
    
  
    
    
     这是第二条公告
     
  
    
  
    
    
     这是第三条公告
     
  
    

   

八、Swiper组件和Picker组件的区别

Swiper组件和Picker组件都是用于实现滑动效果的组件，在具体使用上有以下区别：

1、Swiper一般用于一组图像或文字的轮播展示，适用于大屏幕的展示效果。

2、Picker一般用于选择异常内容，包括时间选择、区域选择等，适用于小屏幕的操作效果。

示例代码：

   
  
    
    
     
  
    
  
    
    
     
  
    
  
    
    
     
  
    

   



   
  
    
    
     
      {{array[index]}}