📱 UniApp 首页设计实战：打造高颜值电商小程序首页

摘要：首页是电商小程序的“门面”，直接决定了用户的留存率和转化率。本文将深入解析基于 RuoYi-Vue + UniApp 的电商小程序首页设计，涵盖 轮播图、滚动公告、新品上市、热销橱窗 及 猜你喜欢 等核心模块的实现细节，并提供关键代码片段，助你快速构建精美首页。

---

🎨 首页整体布局策略

在移动端开发中，我们通常采用 “自上而下，模块化拼装” 的布局策略。我们的首页主要由以下几个核心组件构成：

1. 顶部轮播图 (Banner)：展示活动海报，吸引眼球。
2. 滚动公告 (Notice)：发布紧急通知或促销信息。
3. 金刚区导航 (Menu)：核心功能入口。
4. 新品上市 (New Arrivals)：展示最新上架商品。
5. 热销橱窗 (Hot Sales)：横向滚动展示爆款。
6. 猜你喜欢 (Recommend)：瀑布流展示推荐商品。

---

💡 核心模块实现

1. 轮播图 (Banner)

轮播图是首页最显眼的区域，我们使用 UniApp 原生的 swiper 组件实现，支持自动播放和指示点。

核心代码 (Template)：

<!-- 轮播图 -->
<view class="banner-section animate-fade-in" v-if="programConfig.showBanner && bannerList && bannerList.length > 0">
  <view class="banner-container">
    <swiper class="banner-swiper" 
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500" 
      indicator-color="rgba(255,255,255,0.5)" 
      :indicator-active-color="primaryColor">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image class="banner-image" :src="item.image" mode="aspectFill" @click="clickBanner(item)"></image>
      </swiper-item>
    </swiper>
  </view>
</view>

数据请求 (API)：

import { listAdvertisement } from '@/api/advertisement'

// 加载轮播图数据
async loadBannerData() {
  try {
    const res = await listAdvertisement({ 
      type: '1', // 1代表首页轮播
      status: '1' 
    })
    if (res.code === 200) {
      this.bannerList = res.rows || []
    }
  } catch (error) {
    console.error('加载轮播图失败:', error)
  }
}

2. 滚动公告 (Notice)

公告栏用于传达重要信息，我们设计了一个带喇叭图标的滚动条，使用 swiper 的垂直或水平滚动功能。

核心代码：

<!-- 公告滚动 -->
<view class="notice-section animate-slide-up" v-if="programConfig.showNotice && noticeList.length > 0">
  <view class="notice-icon animate-bounce">
    <text class="notice-emoji">📢</text>
  </view>
  <!-- 纵向/横向滚动均可配置，此处演示横向 -->
  <swiper class="notice-swiper" :vertical="false" :autoplay="true" :interval="4000">
    <swiper-item v-for="(notice, index) in noticeList" :key="index">
      <text class="notice-text" @click="clickNotice(notice)">
        {{ notice.displayText || notice.content }}
      </text>
    </swiper-item>
  </swiper>
</view>

3. 新品上市 (New Arrivals)

新品区域采用 Grid 网格布局，展示最新的商品，并配有 “NEW” 角标，增加稀缺感。

核心代码：

<!-- 新品上市 -->
<view class="new-products-section" v-if="programConfig.showNewProducts">
  <view class="section-title">
    <text class="title-text">新品上市</text>
  </view>
  <view class="new-products-list">
    <view class="new-item" v-for="(item, index) in displayedNewProducts" :key="index" @click="handleProductClick(item)">
      <image :src="item.image" class="new-image" mode="aspectFill"></image>
      <!-- 渐变色角标 -->
      <view class="new-badge" :style="{background: `linear-gradient(135deg, ${themeColorStyles.primaryColor}, ${themeColorStyles.primaryColorLight})`}">
        <text class="badge-text">NEW</text>
      </view>
      <view class="new-info">
        <text class="new-title">{{ item.title }}</text>
        <text class="new-price" :style="{color: themeColorStyles.primaryColor}">¥{{ item.price }}</text>
      </view>
    </view>
  </view>
</view>

4. 热销橱窗 (Hot Sales)

为了展示更多热销商品而不占用过长的页面高度，我们采用了 横向滚动 (Horizontal Scroll) 的设计。

核心代码：

<!-- 热销商品橱窗 -->
<view class="hot-products-container">
  <view class="hot-products-scroll" :style="{transform: `translateX(${scrollOffset}rpx)`}">
    <view class="hot-item" v-for="(item, index) in hotProducts" :key="index" @click="handleProductClick(item)">
      <image :src="item.image" class="hot-image" mode="aspectFill"></image>
      <view class="hot-info">
        <text class="hot-title">{{ item.title }}</text>
        <view class="hot-price-row">
          <text class="hot-price">¥{{ item.price }}</text>
          <text class="hot-sales">已售{{ item.sales }}件</text>
        </view>
      </view>
    </view>
  </view>
</view>

5. 猜你喜欢 (Recommend)

页面底部通常是无限加载的推荐商品流，通过分页加载 API 实现。

API 封装 (api/product.js)：

// 移动端推荐商品列表
export function listMobileRecommendProduct(query) {
  return request({
    url: '/mobile/product/recommend',
    method: 'get',
    params: {
      ...query,
      orgId: API_CONFIG.ORG_ID
    }
  })
}

页面逻辑：

import { listMobileRecommendProduct } from '@/api/product.js'

// 加载更多推荐商品
async loadRecommendProducts() {
  if (this.isLoadingMore || !this.hasMoreRecommend) return
  
  this.isLoadingMore = true
  try {
    const res = await listMobileRecommendProduct({
      pageNum: this.currentPage,
      pageSize: this.pageSize
    })
    if (res.code === 200) {
      // 追加数据
      this.recommendProductList = [...this.recommendProductList, ...(res.rows || [])]
      // 判断是否还有下一页
      this.hasMoreRecommend = this.recommendProductList.length < res.total
      this.currentPage++
    }
  } finally {
    this.isLoadingMore = false
  }
}

---

🚀 交互与动效优化

为了提升用户体验，我们还加入了一些细节优化：

1. 骨架屏 (PageLoading)：在数据加载完成前显示加载动画，避免白屏。
2. 入场动画 (Animate)：各个模块使用 animate-fade-in 或 animate-slide-up 类，配合 animation-delay 实现阶梯式入场效果。
3. 主题色管理：通过 themeColorStyles 全局变量，实现一键换肤功能，适配不同品牌调性。

项目开源地址

想要查看完整的样式代码 (CSS) 和更多细节，请访问我们的开源仓库：

• GitCode: https://gitcode.com/dreamyy/iterativecat-ruoyi-shop.git
• Gitee: https://gitee.com/xjkvbnwe/iterativecat-ruoyi-shop

用代码构建美好，让电商触手可及。