uni-app 内置组件（上）

uni-app 参考小程序规范，提供了一批内置组件，覆盖了移动端 UI 的基础元素。它们在各平台渲染效果一致，你不需要关心底层是 div 还是原生控件。

本文先学最常用的基础组件，view、text、image、scroll-view、swiper，下一篇再学表单组件。

组件与 HTML 标签的对应关系

记住一点，uni-app 模板里不能直接用 HTML 标签，<div>、<span> 在页面里不渲染，统一用内置组件。

view 容器组件

相当于 <div>，块级元素，用来布局和分组：

<template>
  <view class="container">
    <view class="row">第一行</view>
    <view class="row">第二行</view>
  </view>
</template>

它支持 hover-class 属性，点击时显示按压效果，很适合做可点击的行：

<view class="cell" hover-class="cell-active" @click="onTap">点击这行</view>

text 文本组件

相当于 <span>，行内元素，用来显示文本。注意事项：

• 只能嵌套 <text>，不能放其他组件
• 默认不支持 \n 换行，需要换行时在模板里写两个 <text> 或用 decode 属性

<text>普通文本</text>
<text selectable>这段文字可以被长按选中复制</text>
<text space="nbsp">带空格的文本</text>

image 图片组件

相当于 <img>，但比 HTML 里复杂一点，关键是 mode 属性，控制图片在容器里的裁剪和缩放方式：

<template>
  <!-- 固定宽高 + aspectFill，商品图经典写法 -->
  <image class="goods-img" src="/static/goods.png" mode="aspectFill"></image>
</template>

<style scoped>
.goods-img {
  width: 300rpx;
  height: 300rpx;
  background-color: #eee;
}
</style>

提示：image 必须显式设置宽高，否则不显示。本地图片放 static/ 目录，引用路径以 /static/ 开头。

scroll-view 可滚动区域

移动端页面常常需要局部滚动（比如中间列表滚、顶部导航固定），用 scroll-view 实现：

<template>
  <!-- scroll-y 开启纵向滚动，高度必须显式设置 -->
  <scroll-view class="list" scroll-y @scrolltolower="loadMore">
    <view class="item" v-for="i in 50" :key="i">第 {{ i }} 项</view>
  </scroll-view>
</template>

<style scoped>
.list {
  height: 500rpx; /* 不设高度无法滚动 */
}
</style>

两个高频用法：

• scroll-y / scroll-x，开启纵向/横向滚动
• @scrolltolower，滚动到底部触发，常用于「上拉加载更多」

注意：scroll-view 必须设置固定高度才能滚动。如果想让整个页面滚动，不需要 scroll-view，页面本身就是滚动的。

swiper 轮播组件

首页的轮播图是移动端标配，swiper 封装好了滑动切换、自动播放：

<template>
  <swiper class="banner" indicator-dots circular autoplay interval="3000">
    <swiper-item>
      <image class="banner-img" src="/static/banner1.png" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
      <image class="banner-img" src="/static/banner2.png" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
</template>

<style scoped>
.banner {
  height: 300rpx;
}
.banner-img {
  width: 100%;
  height: 100%;
}
</style>

常用属性：

• indicator-dots，显示底部指示圆点
• autoplay，自动播放
• circular，循环切换
• interval，自动播放间隔（毫秒）

CSS 写法与 rpx 单位

组件样式和普通 Vue 完全一致，写在 <style scoped> 里，但单位建议用 rpx 而不是 px：

.goods-card {
  width: 350rpx;
  height: 450rpx;
  margin: 20rpx;
  border-radius: 16rpx;
}

rpx 是 uni-app 特有的响应式单位，750rpx 永远等于屏幕宽度。屏幕越宽，1rpx 对应的实际像素越多，同一套样式就能自动适配不同尺寸的屏幕。它详细的工作原理在样式篇里讲。

综合示例：商品卡片

把上面的组件组合起来，做一个常见的商品卡片：

<template>
  <view class="goods-card">
    <image class="goods-img" src="/static/goods.png" mode="aspectFill"></image>
    <view class="goods-info">
      <text class="goods-name">无线蓝牙耳机 Pro</text>
      <text class="goods-desc">主动降噪 超长续航 舒适佩戴</text>
      <view class="goods-bottom">
        <text class="goods-price">¥ 299</text>
        <button class="goods-btn" size="mini" type="primary">加入购物车</button>
      </view>
    </view>
  </view>
</template>

<style scoped>
.goods-card {
  display: flex;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
}
.goods-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
}
.goods-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-name {
  font-size: 30rpx;
  font-weight: bold;
}
.goods-desc {
  font-size: 24rpx;
  color: #999;
}
.goods-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods-price {
  color: #ff5000;
  font-size: 32rpx;
  font-weight: bold;
}
</style>

用到的知识点全是本文刚学的，view 布局、image 裁剪、text 文本，加一个按钮收尾。

总结

一句话总结：uni-app 的基础组件就是「div、span、img」换了个名字，再加上移动端专属的 scroll-view 和 swiper，模板里用内置组件、样式里用 rpx，就能拼出常见的移动端界面。