實現輪播圖之前必須知道以下三點：

一、輪播圖外層容器swiper

二、每一個輪播項swiper-item

三、swiper標簽存在默認樣式

1. width 100%

2. height 默認為 150px

3 .swiper高度無法實現由內容撐開

默認的150px高度的輪播圖如下圖:

原圖是長這個樣子的：

在默認情況下的高度為150px的輪播圖不太好看，所以我們需要給它重新設置高度

swiper寬度/?swiper高度=原圖的寬度/原圖的高度

可以得到swiper高度?=swiper寬度*原圖的高度/原圖的寬度?

我們可以將高度設置為

height：calc（750rpx? *?原圖的高度/原圖的寬度 ）；

我還將圖片設置寬度100%

效果對比：

默認的樣子：

設置后的樣子：

可以根據需要設置屬性autoplay，interval，circular，indicator-dots...詳細看swiper微信開放文檔

1.autoplay自動輪播

2.interval修改輪播時間

3.circular銜接輪播

4. indicator-dots顯示指示器分頁器索引器???

5. indicator-color指示器的未選擇的顏色

6. indicator-active-color選中的時候的指示器的顏色

swiper | 微信開放文檔

我設置的wxml：

?

?wxss：

輪播圖效果：

輪播圖效果

總結

以上是生活随笔為你收集整理的微信小程序实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。