一分鐘學會如何自定義小程式輪播圖（蜜雪冰城Demo）

低學歷程式設計師發表於2022-06-01

最近開發小程式專案用到了輪播圖，預設的有點單調，作為後端程式設計師，研究一番最終實現了。本文會從思路，程式碼詳細介紹，相信讀過此文後，不管以後在開發中碰到輪播圖還是需要自定義修改其他的樣式都可以按這個思路解決。

框架 編輯器
uni-app Hbuilder X

先上原始碼和預設樣式

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="height: 350rpx;"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" style="height: 350rpx;"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

在這裡插入圖片描述

再看看我們要實現的目標樣式

在這裡插入圖片描述

開搞~

1. 小程式前端樣式控制還是css，那麼我們找到css就可以修改。先在瀏覽器開啟，方便除錯。在這裡插入圖片描述

2. 滑鼠放到輪播圖點上，滑鼠變成小手後--->點選滑鼠右鍵--->檢查

在這裡插入圖片描述
好了，我們定位到了控制樣式的css

<div class="uni-swiper-dots uni-swiper-dots-horizontal">
	<div class="uni-swiper-dot uni-swiper-dot-active">
	</div>
	<div class="uni-swiper-dot">
	</div>
</div>

經過我3級英語的反覆分析
uni-swiper-dot 是輪播圖的預設點樣式
uni-swiper-dot-active 在標籤class裡不停的切換，說明這個是輪播到當前index的樣式

3. 這下可以開始搞了，不過先別急著程式碼裡更改，我們先在除錯視窗試著更改下css樣式，看是否定位正確。在這裡插入圖片描述

哦了，當我把寬高都變為20px後，明顯輪播圖的點變大了。這樣就確定之前的分析是正確的。

4. 開始在程式碼裡改成我們想要的樣式。（如果對css不熟悉的小夥伴，可以繼續在瀏覽器裡不停嘗試到自己想要的效果再在程式碼裡做更改）

先分析目標樣式，發現它的點偏左，且輪播到當前index後樣式為一個白色的長條。

5.話不多說，直接在頁面style里加入css。

  // 控制輪播圖點整體佈局在左邊
   uni-swiper .uni-swiper-dots{
		left: 60px;
	}
	// 預設樣式
	uni-swiper .uni-swiper-dot{
		height: 5px;
		width: 5px;
		background: rgba(0,0,0,.1);
	}
	// 輪播到當前index的樣式
	uni-swiper .uni-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}

o yeah！完工了，我真是個天才。
噯，不對，瀏覽器開啟怎麼還是以前的樣式?
是不是編譯器沒編譯最新的？好，再編譯一次，不行
是不是瀏覽器快取導致的？好，刪除快取，還是不行。。
哦，知道了，一定是沒寫 !important，它的樣式沒有覆蓋掉，加上，還是不行。。。毀滅吧，累了!
long long time after，再次翻看這段程式碼，我一直在想為什麼在瀏覽器中更改可以，而在程式碼裡更改卻沒生效呢？好吧，我承認我百度了，可是翻了很多沒有找到我碰到的問題，只能繼續翻翻翻，最終碰到一個類似的問題，文章說的是有些元件在編譯過後是原生元件,生成後不能更改，需要把css樣式放到app.vue中，好吧，抱著試一試的心態把css放到app.vue的style下，沒想到問題解決了。。

6. 貼改完的H5效果圖在這裡插入圖片描述

哦 yeah，這次終於完工了吧。

是的，你沒猜錯。當我把程式碼執行在微信小程式的時候，那熟悉的2個黑點我真的不忍直視。why？
在這裡插入圖片描述

打起精神接著來吧

1. 在微信小程式中除錯竟然原封不動的展示了我的程式碼

在這裡插入圖片描述
根本沒有發現什麼dot樣式之類的，那我還怎麼調？

（這裡我沒有找到其他辦法，有懂的小夥伴可以留言分享下微信開發工具如何除錯，提前感謝。）

不過我還是找到了一個辦法可以除錯，就是在他的官網，這個辦法以後可以用到其他的css修改上，不只是swiper。

2. 瀏覽器開啟官網微信小程式開發文件官網

3. 我們按照之前的方法定位元素，找到css在這裡插入圖片描述

發現他的class 名字在h5是uni-開頭，在微信小程式中是wx-開頭，
和之前的不一樣，這樣導致不生效，好，那我們把程式碼改成wx-開頭。

最終效果

在這裡插入圖片描述
有些小夥伴應該看到之前的標題欄不存在了，這個很簡單，在uni-app裡pages.json檔案修改"navigationStyle": "custom"。小程式的修改方式大家自行百度。

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "輪播圖demo",
			"navigationStyle": "custom"
		}
	}

最終css程式碼

// ifdef H5 代表在h5環境下生效，以此類推。
//如果只需在微信下修改，只需把ifdef mp-weixin下內容複製到app.vue的style中
/* #ifdef H5 */
	// 控制輪播圖點整體佈局在左邊
	uni-swiper .uni-swiper-dots{
		left: 60px;
	}
	// 預設樣式
	uni-swiper .uni-swiper-dot{
		height: 5px;
		width: 5px;
		background: rgba(0,0,0,.1);
	}
	// 輪播到當前index的樣式
	uni-swiper .uni-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	// 控制輪播圖點整體佈局在左邊
	wx-swiper .wx-swiper-dots{
		left: 60px;
	}
	// 預設樣式
	wx-swiper .wx-swiper-dot{
		background: rgba(0,0,0,.1);
		height: 5px;
		width: 5px;
	}
	// 輪播到當前index的樣式
	wx-swiper .wx-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}
	/* #endif */

本人後端一枚，不過前端現在樣式一般都能做到。(給我個設計圖或者素材可以直接寫出來)
其實基礎css很容易學，在這裡給後端程式設計師一個推薦，去看flex佈局，最多也就2個小時時間，最最重要的是一定要練習，我做小程式前後端開發都是自己做，或許我接觸的少，但是在我做的專案中flex佈局可以搞定99%的事，剩下的position: absolute;就可以解決。只要把這兩塊掌握了，用uni-app也好，用小程式設計師原生也好，都是很簡單的。

寫文不易，回頭看看就這麼些東西，寫下來用了快2個小時。。。。
喜歡的小夥伴點贊支援下我這個新人，以後可以多多分享一些開發中碰到的問題給大家。

相關文章