ps:本筆記來自B站咸蝦米壁紙項目

一.創建項目，完成項目初始化搭建

1.在HBuilder X創建wallper項目，使用默認模塊，選擇vue；

2.在項目根目錄下創建common目錄，用于存放靜態資源，創建項目時自動生成static目錄，之所以不把靜態資源放到static目錄下，是因為放在static目錄下，不管文件是否引用都會打包進去，而放到common目錄只會將引用到的文件打包到項目包里，我們應該盡量控制包的大小；

3.在common目錄下新建images目錄用于存放圖片資源，新建style目錄存放樣式文件；

4.在style目錄下新建common-style.scss文件，寫入下面折代碼：

view{box-sizing: border-box;
}

box-sizing: border-box:為所有元素設置盒模型。為border-box聲明表示元素的寬度(width)和高度(height)將包含：

• 內容區(content)
• 內邊距(padding)
• 邊框(border)

這種設置的好處：

• 更直觀的尺寸控制
• 簡化布局計算
• 響應式設計中更易處理百分比寬度

5.在程序主入口文件App.vue引入上面的scss文件，作為全局樣式：

<style lang="scss">@import "common/style/common-style.scss";/*每個頁面公共css */
</style>

?二. 首頁banner效果的實現

在首頁index.vue引入輪播圖組件：

<template><view class="homeLayout"><view class="banner"><swiper indicator-dots indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#fff" autoplay circular><swiper-item ><image src="/common/images/banner1.jpg" mode="aspectFill"></image></swiper-item><swiper-item ><image src="/common/images/banner2.jpg" mode="aspectFill"></image></swiper-item><swiper-item ><image src="/common/images/banner3.jpg" mode="aspectFill"></image></swiper-item></swiper></view></view>
</template>

上面的代碼實現的效果：

1. 輪播圖功能
自動輪播 (autoplay)：圖片會自動切換，無需用戶手動操作。

循環播放 (circular)：滑動到最后一張后，會無縫銜接回到第一張，形成無限循環。

指示器 (indicator-dots)：顯示底部的小圓點，標識當前輪播的位置。

indicator-color="rgba(255, 255, 255, 0.5)"：未選中的指示點顏色（半透明白色）。

indicator-active-color="#fff"：當前選中的指示點顏色（純白色）。

2. 圖片展示
圖片填充模式 (mode="aspectFill")：圖片會按比例縮放，填滿整個容器，可能會被裁剪，但不會變形。

3. 布局結構
最外層是 homeLayout 容器，用于整體頁面布局。

banner 類包裹 swiper，用于控制輪播圖的樣式（如寬度、高度、邊距等）。

SCSS部分的代碼：

<style lang="scss" scoped>.homeLayout{.banner{width: 750rpx;padding: 30rpx 0;swiper{width: 750rpx;height: 340rpx;swiper-item{width: 100%;height: 100%;padding: 0 30rpx;image{width: 100%;height: 100%;border-radius: 10rpx;}}}}}
</style>

代碼解釋：

1. 外層容器布局 (homeLayout 和 banner)
寬度固定 750rpx（表示滿屏寬度）。

上下內邊距 30rpx，使輪播圖與上下內容保持間距。

2. 輪播圖 (swiper) 樣式
寬度 750rpx（占滿容器寬度）。

高度 340rpx（固定高度）。

輪播項 (swiper-item)：

占滿父容器 (width: 100%; height: 100%)，繼承自父類。

左右內邊距 30rpx，使圖片不緊貼屏幕邊緣，留出呼吸空間。

3. 圖片 (image) 樣式
寬度和高度 100%（填滿 swiper-item 的可用空間），繼承自父類。

圓角 10rpx，使圖片四角變圓潤，提升視覺效果。

最終效果
輪播圖寬度占滿屏幕（750rpx）。

高度固定（340rpx），圖片比例不變（aspectFill 模式）。

圖片兩側有間距（padding: 0 30rpx），避免圖片緊貼屏幕邊緣。

圖片帶圓角（border-radius: 10rpx），視覺更柔和。

整體上下有留白（padding: 30rpx 0），避免與其他內容擠在一起。

重要事項說明：
rpx 單位：是小程序/Uniapp 的響應式單位，會根據屏幕寬度自適應縮放（750rpx ≈ 100% 屏幕寬度）。

scoped 作用域：樣式僅作用于當前組件，避免影響其他頁面。

aspectFill 模式（在 image 組件中定義）：確保圖片按比例縮放并填滿容器，可能部分內容被裁剪，但不會變形。

最終實現的效果：