155 lines
3.8 KiB
Markdown
155 lines
3.8 KiB
Markdown
# 家长端轮播图功能实现
|
||
|
||
## 📅 实施日期
|
||
2026-01-27
|
||
|
||
## 🎯 需求说明
|
||
在家长端首页红框位置（原蓝色Banner区域）替换为5张轮播图。
|
||
|
||
## ✅ 实施内容
|
||
|
||
### 1. 图片资源管理
|
||
- **源路径**: `D:\project\peixu\peidu\uniapp\p\`
|
||
- **目标路径**: `peidu/uniapp/static/banner/`
|
||
- **图片列表**:
|
||
- banner1.jpg (189KB)
|
||
- banner2.jpg (171KB)
|
||
- banner3.jpg (185KB)
|
||
- banner4.jpg (178KB)
|
||
- banner5.jpg (171KB)
|
||
|
||
### 2. 代码修改
|
||
|
||
#### 修改文件1: `peidu/uniapp/src/pages/index/components/UserHome.vue`
|
||
- ✅ 替换 Banner 区域为 swiper 轮播组件
|
||
- ✅ 添加 bannerList 数据（5张图片）
|
||
- ✅ 更新样式为轮播图样式
|
||
|
||
#### 修改文件2: `peidu/uniapp/pages/index/components/UserHome.vue`
|
||
- ✅ 替换 Banner 区域为 swiper 轮播组件
|
||
- ✅ 添加 bannerList 数据（5张图片）
|
||
- ✅ 更新样式为轮播图样式
|
||
|
||
### 3. 轮播图配置
|
||
- **自动播放**: 是（3秒间隔）
|
||
- **循环播放**: 是
|
||
- **指示点**: 是（白色半透明）
|
||
- **切换动画**: 500ms
|
||
- **高度**: 360rpx（与原Banner一致）
|
||
- **圆角**: 24rpx
|
||
- **阴影**: 轻微阴影效果
|
||
|
||
## 📝 技术实现
|
||
|
||
### HTML结构
|
||
```vue
|
||
<view class="banner-swiper-container">
|
||
<swiper
|
||
class="banner-swiper"
|
||
:indicator-dots="true"
|
||
:autoplay="true"
|
||
:interval="3000"
|
||
:duration="500"
|
||
:circular="true"
|
||
indicator-color="rgba(255, 255, 255, 0.5)"
|
||
indicator-active-color="#ffffff"
|
||
>
|
||
<swiper-item v-for="(banner, index) in bannerList" :key="index">
|
||
<image class="banner-image" :src="banner.image" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
```
|
||
|
||
### 数据配置
|
||
```javascript
|
||
bannerList: [
|
||
{ id: 1, image: '/static/banner/banner1.jpg' },
|
||
{ id: 2, image: '/static/banner/banner2.jpg' },
|
||
{ id: 3, image: '/static/banner/banner3.jpg' },
|
||
{ id: 4, image: '/static/banner/banner4.jpg' },
|
||
{ id: 5, image: '/static/banner/banner5.jpg' }
|
||
]
|
||
```
|
||
|
||
### 样式配置
|
||
```scss
|
||
.banner-swiper-container {
|
||
margin: 30rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(45, 150, 135, 0.15);
|
||
|
||
.banner-swiper {
|
||
height: 360rpx;
|
||
|
||
.banner-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🧪 测试建议
|
||
|
||
1. **功能测试**
|
||
- 轮播图是否正常显示
|
||
- 自动播放是否正常（3秒切换）
|
||
- 手动滑动是否流畅
|
||
- 指示点是否正确显示
|
||
|
||
2. **样式测试**
|
||
- 图片是否填充完整
|
||
- 圆角是否正常显示
|
||
- 阴影效果是否合适
|
||
- 不同屏幕尺寸下的显示效果
|
||
|
||
3. **性能测试**
|
||
- 图片加载速度
|
||
- 切换动画流畅度
|
||
- 内存占用情况
|
||
|
||
## 📌 注意事项
|
||
|
||
1. 图片已复制到 `static/banner/` 目录，确保该目录被正确打包
|
||
2. 两个 UserHome.vue 文件都已同步修改（src 和 pages 目录）
|
||
3. 如需修改轮播间隔时间，修改 `:interval` 属性值（单位：毫秒）
|
||
4. 如需添加点击跳转功能，在 `<swiper-item>` 上添加 `@click` 事件
|
||
|
||
## 🔄 后续扩展
|
||
|
||
如需添加轮播图点击跳转功能：
|
||
|
||
```vue
|
||
<!-- 添加点击事件 -->
|
||
<swiper-item v-for="(banner, index) in bannerList" :key="index" @click="onBannerClick(banner)">
|
||
<image class="banner-image" :src="banner.image" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
|
||
<!-- 在 methods 中添加 -->
|
||
methods: {
|
||
onBannerClick(banner) {
|
||
if (banner.url) {
|
||
uni.navigateTo({ url: banner.url })
|
||
}
|
||
}
|
||
}
|
||
|
||
<!-- 在 bannerList 中添加 url 字段 -->
|
||
bannerList: [
|
||
{ id: 1, image: '/static/banner/banner1.jpg', url: '/pages/xxx' },
|
||
// ...
|
||
]
|
||
```
|
||
|
||
## ✅ 完成状态
|
||
- [x] 图片资源复制
|
||
- [x] 代码修改（src目录）
|
||
- [x] 代码修改（pages目录）
|
||
- [x] 样式更新
|
||
- [x] 功能配置
|
||
|
||
## 🎉 实施完成
|
||
轮播图功能已成功实现，可以在微信开发者工具中预览效果。
|