uniapp基础组件概述

uniapp基础组件概述

uniapp提供了一系列跨平台的基础组件，这些组件在不同平台上会有不同的渲染效果，但API保持一致。基础组件包括视图容器、表单组件、媒体组件、地图等，覆盖了常见的开发需求。

视图容器类组件

view组件：相当于HTML中的div，是最基础的容器组件。支持hover-class属性设置点击态样式，常用于布局构建。

<view class="container" hover-class="hover-style">
  内容区域
</view>

scroll-view组件：可滚动视图区域，支持横向和纵向滚动。通过scroll-x/scroll-y属性控制方向，常用于实现局部滚动区域。

<scroll-view scroll-y style="height: 300px;">
  <view v-for="item in list" :key="item.id">{{item.text}}</view>
</scroll-view>

swiper组件：轮播图容器，支持自动播放、指示器等特性。通过circular属性可实现无限循环。

表单类组件

input组件：输入框组件，支持各种输入类型。uniapp对原生input进行了封装，提供了更统一的跨平台表现。

<input v-model="value" type="text" placeholder="请输入内容" @confirm="handleConfirm" />

picker组件：选择器组件，支持普通选择器、时间选择器和日期选择器三种模式。通过mode属性切换不同类型。

<picker mode="selector" :range="options" @change="handleChange">
  <view>当前选择：{{selected}}</view>
</picker>

checkbox/radio组件：复选框和单选按钮组件，通常需要配合checkbox-group/radio-group使用。

媒体类组件

image组件：图片显示组件，支持懒加载、裁剪模式等特性。相比HTML的img标签有更好的性能优化。

<image src="/static/logo.png" mode="aspectFit" lazy-load></image>

video组件：视频播放组件，支持全屏播放、弹幕等高级功能。在不同平台上有不同的原生播放器实现。

<video src="http://example.com/video.mp4" controls></video>

导航类组件

navigator组件：页面链接组件，相当于HTML的a标签。支持跳转普通页面和tabBar页面，可通过open-type属性实现更多功能。

<navigator url="/pages/home/home" open-type="navigate">跳转首页</navigator>

地图组件

map组件：地图展示组件，支持标记点、路线规划等功能。需要配置腾讯或高德地图的key后方可使用。

<map longitude="116.397428" latitude="39.90923" markers="{{markers}}"></map>

扩展组件能力

所有组件都支持通用事件绑定如@click、@touchstart等，也支持数据绑定和条件渲染。uniapp组件设计遵循Vue语法规范，开发者可以快速上手。

通过合理组合这些基础组件，可以构建出功能丰富的跨平台应用。对于更复杂的需求，uniapp还支持自定义组件开发和第三方组件库引入。