微信小程序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]}}