ps:本笔记来自B站咸虾米壁纸项目
一.创建项目，完成项目初始化搭建
1.在HBuilder X创建wallper项目，使用默认模块，选择vue；
2.在项目根目录下创建common目录，用于存放静态资源，创建项目时自动生成static目录，之所以不把静态资源放到static目录下，是因为放在static目录下，不管文件是否引用都会打包进去，而放到common目录只会将引用到的文件打包到项目包里，我们应该尽量控制包的大小；
3.在common目录下新建images目录用于存放图片资源，新建style目录存放样式文件；
4.在style目录下新建common-style.scss文件，写入下面折代码：
css
view{
box-sizing: border-box;
}box-sizing: border-box:为所有元素设置盒模型。为border-box声明表示元素的宽度(width)和高度(height)将包含：
- 内容区(content)
- 内边距(padding)
- 边框(border)
这种设置的好处：
- 更直观的尺寸控制
- 简化布局计算
- 响应式设计中更易处理百分比宽度
5.在程序主入口文件App.vue引入上面的scss文件，作为全局样式：
css
<style lang="scss">
@import "common/style/common-style.scss";
/*每个页面公共css */
</style>二. 首页banner效果的实现
在首页index.vue引入轮播图组件：
html
<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部分的代码：
css
<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 组件中定义）：确保图片按比例缩放并填满容器，可能部分内容被裁剪，但不会变形。
最终实现的效果：
