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还支持自定义组件开发和第三方组件库引入。