uni-app实战：用uni-row/col打造完美响应式商城首页（附完整代码）

原创

于 2026-02-18 03:49:01 发布 · 682 阅读

标签

uni-app实战：用uni-row/col打造完美响应式商城首页（附完整代码）

在移动互联网时代，电商应用的跨平台适配成为开发者面临的重要挑战。uni-app作为一款基于Vue.js的跨平台开发框架，其内置的uni-row和uni-col组件为解决这一难题提供了优雅的解决方案。本文将深入探讨如何利用这些组件构建一个专业级的响应式商城首页。

1. 商城首页布局规划与设计思路

电商应用的首页通常包含以下几个核心模块：

轮播图区域：展示促销活动或主打商品
商品分类导航：帮助用户快速定位商品类别
商品推荐列表：展示精选商品
底部导航栏：提供主要功能入口

使用uni-row/col实现这些模块时，我们需要考虑不同屏幕尺寸下的显示效果。uni-row/col基于24栅格系统，能够自动适应各种屏幕宽度。

响应式断点设置建议：

断点类型	屏幕宽度	适用设备示例
xs	<768px	手机竖屏
sm	≥768px	平板竖屏
md	≥992px	平板横屏
lg	≥1200px	小尺寸笔记本
xl	≥1920px	大尺寸显示器

2. 轮播图区域实现

轮播图是电商首页的"门面"，需要确保在各种设备上都能完美展示。以下是实现代码：

<template>
  <view class="banner-section">
    <uni-row>
      <uni-col :span="24">
        <swiper class="swiper" :autoplay="true" :interval="3000">
          <swiper-item v-for="(item, index) in banners" :key="index">
            <image :src="https://blog.csdn.net/item.imageUrl" mode="widthFix" class="banner-image" />
          </swiper-item>
        </swiper>
      </uni-col>
    </uni-row>
  </view>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        { imageUrl: '/static/banner1.jpg', link: '/promo1' },
        { imageUrl: '/static/banner2.jpg', link: '/promo2' },
        { imageUrl: '/static/banner3.jpg', link: '/promo3' }
      ]
    }
  }
}
</script>

<style>
.banner-section {
  margin-bottom: 20rpx;
}
.swiper {
  height: 350rpx;
}
.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}
</style>

关键优化点：