当前位置：首页 > news >正文

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

news 来源：原创 2025/6/13 6:29:21

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 模式）。