前言

對于目前形式，微信小程序是一個熱門，那么我們該如何去學習并且掌握之后去做實際項目呢？
為此我特意開設此專欄，在我學習的同時也將其分享給大家！

本篇文章主要介紹我們微信小程序 swiper 的常用屬性，接下來我們將逐一講解。

如果在往下閱讀的過程中，有什么錯誤的地方，期待大家的指點！

swiper 組件的常用屬性值

大家可以先看一下下面的列表了解一下相關屬性值，然后我們逐一介紹

輪播圖指示點顯示（indicator-dots）

• 指示點構建

   <swiper class=" swiper-container " indicator-dots>
   <!-- 第一個輪播圖 -->
   <swiper-item class="item">
    <view>A</view>
   </swiper-item>
  
   <!-- 第二個輪播圖 -->
   <swiper-item class="item">
     <view>B</view>
   </swiper-item>
  
   <!-- 第三個輪播圖 -->
   <swiper-item class="item">
     <view>C</view>
   </swiper-item>
   </swiper>
  

• 效果展示

  

指示點顏色（indicator-color）

• 設置指示點顏色為紅色

  <swiper class=" swiper-container " indicator-dots indicator-color="write">
  <!-- 第一個輪播圖 -->
  <swiper-item class="item">
   <view>A</view>
  </swiper-item>
  
  <!-- 第二個輪播圖 -->
  <swiper-item class="item">
    <view>B</view>
  </swiper-item>
  
  <!-- 第三個輪播圖 -->
  <swiper-item class="item">
    <view>C</view>
  </swiper-item>
  </swiper>
  

• 效果展示

  

  我們可以看到未輪播的指示點的顏色為白色

改變當前指示點顏色（indicator-active-color）

• 設置當前指示點顏色為藍色

   <swiper class=" swiper-container " indicator-dots indicator-color="write" >
   <!-- 第一個輪播圖 -->
   <swiper-item class="item">
    <view>A</view>
   </swiper-item>
  
   <!-- 第二個輪播圖 -->
   <swiper-item class="item">
     <view>B</view>
   </swiper-item>
  
   <!-- 第三個輪播圖 -->
   <swiper-item class="item">
     <view>C</view>
   </swiper-item>
   </swiper>
  
  

• 效果展示

  

輪播圖自動播放（autoplay ）

• 設置輪播圖自動播放

   <swiper class=" swiper-container " indicator-dots indicator-color="write" indicator-active-color="blue" autoplay>
   <!-- 第一個輪播圖 -->
   <swiper-item class="item">
    <view>A</view>
   </swiper-item>
  
   <!-- 第二個輪播圖 -->
   <swiper-item class="item">
     <view>B</view>
   </swiper-item>
  
   <!-- 第三個輪播圖 -->
   <swiper-item class="item">
     <view>C</view>
   </swiper-item>
   </swiper>
  

• 效果展示

  

修改自動輪播速度（interval ）

• 設置切換時間為2秒（interval 的單位是 ms）

   <swiper class=" swiper-container " indicator-dots indicator-color="write" indicator-active-color="blue" autoplay interval="2000">
   <!-- 第一個輪播圖 -->
   <swiper-item class="item">
    <view>A</view>
   </swiper-item>
  
   <!-- 第二個輪播圖 -->
   <swiper-item class="item">
     <view>B</view>
   </swiper-item>
  
   <!-- 第三個輪播圖 -->
   <swiper-item class="item">
     <view>C</view>
   </swiper-item>
   </swiper>
  

• 效果展示

  

設置銜接滑動（circular ）

• 設置銜接滑動（原來我們的圖片輪播到 C 的時候就會跳轉到 A，而不是滑動到 C）

   <swiper class=" swiper-container " indicator-dots indicator-color="write" indicator-active-color="blue" autoplay interval="2000" circular >
   <!-- 第一個輪播圖 -->
   <swiper-item class="item">
    <view>A</view>
   </swiper-item>
  
   <!-- 第二個輪播圖 -->
   <swiper-item class="item">
     <view>B</view>
   </swiper-item>
  
   <!-- 第三個輪播圖 -->
   <swiper-item class="item">
     <view>C</view>
   </swiper-item>
   </swiper>
  

• 效果展示

  

總結

大家每天都要開開心心的喔，讓我們一起快樂的學習吧！

文章來源地址http://www.zghlxwxcb.cn/news/detail-479590.html

到了這里，關于【微信小程序入門到精通】— swiper 超詳細的屬性值講解！確定不來看看？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！