uni-app项目实战笔记1--创建项目和实现首页轮播图功能

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 组件中定义）：确保图片按比例缩放并填满容器，可能部分内容被裁剪，但不会变形。

最终实现的效果：