peixue-dev/Archive/[一次性]家长端轮播图功能实现-2026-01-27.md

家长端轮播图功能实现

📅 实施日期

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结构

<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>

数据配置

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' }
]

样式配置

.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 事件

🔄 后续扩展

如需添加轮播图点击跳转功能：

<!-- 添加点击事件 -->
<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' },
  // ...
]

✅ 完成状态

• 图片资源复制
• 代码修改（src目录）
• 代码修改（pages目录）
• 样式更新
• 功能配置

🎉 实施完成

轮播图功能已成功实现，可以在微信开发者工具中预览效果。