微信小程序中怎么實(shí)現(xiàn)swiper組件構(gòu)建輪播圖

這篇文章主要介紹“微信小程序中怎么實(shí)現(xiàn)swiper組件構(gòu)建輪播圖”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序中怎么實(shí)現(xiàn)swiper組件構(gòu)建輪播圖”文章能幫助大家解決問(wèn)題。

實(shí)現(xiàn)效果圖：

wxml基礎(chǔ)文件：

<view class="classname">
  <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red">
    <swiper-item><image src="/images/1.jpg"></image></swiper-item>
    <swiper-item><image src="/images/2.jpg"></image></swiper-item>
    <swiper-item><image src="/images/3.jpg"></image></swiper-item>
  </swiper> 
</view>

swiper-item僅可放置在組件中，寬高自動(dòng)設(shè)置為100%。 
參數(shù)設(shè)置： 
autoplay 自動(dòng)播放導(dǎo)致swiper變化； 
touch 用戶劃動(dòng)引起swiper變化； 
indicator-dots true是否顯示面板指示點(diǎn)圓圈； 
interval 自動(dòng)切換時(shí)間間隔； 
duration 滑動(dòng)動(dòng)畫時(shí)長(zhǎng); 
更多設(shè)置可以看官方文檔組件！

wxss樣式文件

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}

app.json文件入口

{
 "pages": [
  "pages/redirect/redirect"  
 ],
 "window": {
  "navigationBarBackgroundColor": "#405f80"
 }
}

關(guān)于“微信小程序中怎么實(shí)現(xiàn)swiper組件構(gòu)建輪播圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。