描述：

在工作中開發一個頁面，多少都會用到輪播圖，但是由于微信官方提供的輪播圖swiper組件局限性太大了，所以接下來我會教大家怎么去自定義輪播圖的進度條。

---

簡單修改：

如果你的項目只是簡單的修改小圓點的顏色，那么只需要修改官方提供的indicator-color和indicator-active-color參數就可以了

屬性類型默認值說明

indicator-color	color	rgba(0, 0, 0, .3)	指示點顏色（也就是沒選中小圓點時的顏色）
indicator-active-color	color	#000000	當前選中的指示點顏色

wxml：

<swiper indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange"><swiper-item><view class="red"></view></swiper-item><swiper-item><view class="green"></view></swiper-item><swiper-item><view class="blue"></view></swiper-item> </swiper>

wxss：

swiper {height: 400rpx; }swiper-item view {height: 100%; }.red {background-color: Pink; }.green {background-color: PaleGreen; }.blue {background-color: SkyBlue; }

另外如果需要更改位置的話加上這兩行樣式就好了

.wx-swiper-dots {position: relative;/* unset復原重置屬性值 */left: unset !important;right: 0rpx; }.wx-swiper-dots .wx-swiper-dots-horizontal {margin-bottom: 0rpx; }

---

自定義長條狀：

好了，接下里就是進入正題了，手動寫一個靜態的進度條我相信各位小伙伴都會，那么要怎么做才能讓它隨之我們的輪播圖切換而變化呢？這里就需要用到current這個輪播圖當前頁的下標

屬性類型默認值說明

current	number	0	當前所在滑塊的 index

wxml：在結構上，我先手寫一個進度條，然后讓其懸浮在輪播圖上面，接著再用三元運算符來判斷輪播圖的下標于進度條的下標是否相等，相等就把選中的樣式賦給標簽就好了，另外還需要綁定一個bindchange方法來監聽current下標的改變。

<view class="parent"><!-- 輪播圖 --><swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}"><block wx:for="{{backgroundArr}}" wx:key="*this"><swiper-item><view class="{{item}}"></view></swiper-item></block></swiper><!-- 自定義輪播圖進度點 --><view class="dots"><block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this"><view class="{{current==index?'active':''}}"></view></block></view> </view>

js：在動作上，我們只需要監聽輪播圖的下標變化就好了，一有變動更新下標即可。另外你會發現我動態控制了輪播圖是否動播放，這是為了解決小程序長時間后臺返回后頁面輪播圖出現反復抖動的bug。

Page({/*** 頁面的初始數據*/data: {//輪播圖的數組backgroundArr: ['red', 'green', 'blue'],//輪播圖當前的下標current: 0,//是否自動播放輪播圖autoplay: false,},//監聽輪播圖的下標monitorCurrent: function (e) {// console.log(e.detail.current)let current = e.detail.current;this.setData({current: current})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {//開啟輪播圖this.setData({autoplay: true})},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {//關閉輪播圖this.setData({autoplay: false})},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {//關閉輪播圖this.setData({autoplay: false})},})

wxss：

.parent {position: relative; }swiper {height: 400rpx; }swiper-item view {height: 100%; }.red {background-color: Pink; }.green {background-color: PaleGreen; }.blue {background-color: SkyBlue; }.dots {position: absolute;bottom: 30rpx;display: flex;justify-content: center;align-items: center;width: 100%; }.dots view {width: 10rpx;height: 10rpx;margin: 0 6rpx;border-radius: 10rpx;background-color: #fff; }.dots .active {width: 30rpx;background-color: orange; }

---

自定義帶頁碼：

如果要顯示頁碼的話，我們只需要使用輪播圖的下標（從0開始）加上1來表示當前頁，輪播圖數組的長度來表示頁碼總數就好了。另外輪播圖自動播放也要控制下，不然后臺返回后會有bug。

wxml:

<view class="parent"><!-- 輪播圖 --><swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}"><block wx:for="{{backgroundArr}}" wx:key="*this"><swiper-item><view class="{{item}}"></view></swiper-item></block></swiper><!-- 自定義輪播圖進度點 --><view class="dots">{{current+1}}/{{backgroundArr.length}}</view> </view>

js：

Page({/*** 頁面的初始數據*/data: {//輪播圖的數組backgroundArr: ['red', 'green', 'blue'],//輪播圖當前的下標current: 0,//是否自動播放輪播圖autoplay: false,},//監聽輪播圖的下標monitorCurrent: function (e) {// console.log(e.detail.current)let current = e.detail.current;this.setData({current: current})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {//開啟輪播圖this.setData({autoplay: true})},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {//關閉輪播圖this.setData({autoplay: false})},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {//關閉輪播圖this.setData({autoplay: false})}, })

wxss：

.parent {position: relative; }swiper {height: 400rpx; }swiper-item view {height: 100%; }.red {background-color: Pink; }.green {background-color: PaleGreen; }.blue {background-color: SkyBlue; }.dots {position: absolute;right: 20rpx;bottom: 20rpx;width: 70rpx;height: 35rpx;line-height: 35rpx;text-align: center;font-size: 24rpx;border-radius: 20rpx;background-color: rgba(0, 0, 0, 0.4);color: #fff; }

---

自定義帶計時器：

接著就是這種有計時器的進度條了，這種寫起來會麻煩一點。

wxml：在結構上，在寫進度條時需要有兩層，以我的GIF為例，外層用來放灰色的背景，內層用來放橙色的背景，接著我們只需要動態的去綁定width參數就好了。

<view class="parent"><!-- 輪播圖 --><swiper bindchange="monitorCurrent" indicator-dots="{{false}}" circular="true" indicator-color="white"indicator-active-color="orange" current="{{current}}" autoplay="{{autoplay}}" interval="{{interval}}"><block wx:for="{{backgroundArr}}" wx:key="*this"><swiper-item><view class="{{item}}"></view></swiper-item></block></swiper><!-- 自定義輪播圖進度點 --><view class="dots-parent"><block wx:for="{{backgroundArr}}" wx:for-index="index" wx:key="*this"><view class="progress-line-bg"><view class="{{current==index?'progress-line':''}}" style="width:{{progressNum}}%"></view></view></block></view> </view>

js：在動作上，我們需要先封裝一個輪播圖進度條計時器的方法，其功能是使用選中的進度條從0達到100的填充效果，接著在生命周期onShow函數上初次執行這個方法，緊接著輪播圖翻頁時，再二次去執行這個方法就好了。需要注意的是計時器是在全局data對象里面注冊的，這樣做的用意是每次執行時都可以確保把上一個計時器給清理掉。另外考慮到性能的問題，在頁面隱藏（onHide）或者卸載（onUnload）時，我們要把輪播圖給關了，防止再次生成計時器，接著還需把沒執行完的計時器也清理掉，具體看代碼解析。另外我設置輪播圖自動翻頁的時間是5秒，需要修改的話記得把計時器那也從新計算一下。

Page({/*** 頁面的初始數據*/data: {//輪播圖的數組backgroundArr: ['red', 'green', 'blue'],//輪播圖當前的下標current: 0,//是否自動播放輪播圖autoplay: false,// 輪播圖自動切換時間間隔interval: 5000,//輪播圖進度條的計時器progressNumInterval: null,//輪播圖進度條的進度progressNum: 0},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {//開啟自動輪播this.setData({autoplay: true})// 初次執行頂部輪播圖的進度條的進度點this.progressLineInterval();},//監聽輪播圖的下標monitorCurrent: function (e) {// console.log(e.detail.current)let current = e.detail.current;this.setData({current: current})// 二次執行頂部輪播圖的小圓點的進度點this.progressLineInterval();},//封裝輪播圖進度條計時器的方法progressLineInterval: function () {// 清理小圓點的計時器clearInterval(this.data.progressNumInterval)// 清理小圓點的進度this.setData({progressNum: 0,})/*** 輪播圖的切換時間為5秒，進度條的進度為1-100%，* 因為5000/100=50毫秒，所以每50毫秒就要執行1個進度點* 另外需要把計時器寄存在data{}對象上，否則會清理不掉上一個計時器* */this.data.progressNumInterval = setInterval(() => {let progressNum = this.data.progressNum;// console.log(progressNum)if (progressNum < 100) {progressNum++;} else {progressNum = 0;// 清理進度條的計時器clearInterval(this.data.progressNumInterval)}this.setData({progressNum: progressNum})}, 50)},// 暫停輪播圖pauseSwiper() {// 關閉自動輪播this.setData({autoplay: false})// 清理進度條的計時器clearInterval(this.data.progressNumInterval)},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {this.pauseSwiper()},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {this.pauseSwiper()}, })

wxss:

.parent {position: relative; }swiper {height: 400rpx; }swiper-item view {height: 100%; }.red {background-color: Pink; }.green {background-color: PaleGreen; }.blue {background-color: SkyBlue; }.dots-parent {position: absolute;bottom: 30rpx;display: flex;justify-content: center;align-items: center;width: 100%; }.dots-parent .progress-line-bg {margin-left: 10rpx;width: 45rpx;height: 8rpx;border-radius: 8rpx;background-color: rgba(255, 255, 255, 0.5); }.progress-line {height: 8rpx;border-radius: 8rpx;background-color: #E42C2C; }

另外，如果你要在實體機上查看效果，點擊預覽就好了，如果點的是真機測試，會有延遲，導致進度條不能填充到100%的bug

---

覺得不錯的小伙伴記得點個贊哦！！（づ￣3￣）づ╭?～

總結

以上是生活随笔為你收集整理的微信小程序自定义swiper轮播图面板指示点|小圆点|进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

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