当前位置:首页 > uni-app

uniapp标签有哪些

2026-03-05 10:23:18uni-app

uniapp常用标签

uniapp基于Vue.js开发,支持大部分HTML标签,同时提供了一些跨平台的自定义组件。以下分类列出常用标签:

基础组件

  • <view>:视图容器,类似HTML的<div>
  • <text>:文本组件,类似<span>
  • <image>:图片组件,增强版<img>
  • <button>:按钮组件
  • <input>:输入框
  • <textarea>:多行输入框
  • <scroll-view>:可滚动视图区域

表单组件

  • <checkbox>:复选框
  • <radio>:单选框
  • <picker>:列表选择器
  • <slider>:滑动选择器
  • <switch>:开关选择器
  • <label>:表单标签

导航组件

  • <navigator>:页面链接,类似<a>
  • <uni-nav-bar>:导航栏(需引入uni-ui)

媒体组件

  • <video>:视频播放器
  • <camera>:相机
  • <live-player>:直播播放器
  • <live-pusher>:直播推流

地图组件

  • <map>:地图

其他特殊组件

  • <canvas>:画布
  • <web-view>:网页容器
  • <swiper>:滑块视图容器
  • <icon>:图标
  • <progress>:进度条

平台差异说明

  1. 部分组件在不同平台有不同表现,如<checkbox>在H5端使用原生HTML控件,在小程序端使用自定义组件
  2. 有些组件只在特定平台支持,如<live-pusher>仅在微信小程序和App端支持
  3. 推荐优先使用uniapp提供的跨平台组件,而非直接使用HTML原生标签

扩展组件

通过uni-ui可获取更多高质量组件:

uniapp标签有哪些

  • <uni-card>:卡片组件
  • <uni-list>:列表组件
  • <uni-grid>:宫格组件
  • <uni-popup>:弹出层组件

注意事项

  1. 组件属性遵循Vue的v-bind语法
  2. 事件处理使用@event绑定
  3. 样式编写支持大部分CSS3特性
  4. 组件层级在某些平台有限制,如微信小程序最多支持18层

标签: 标签有哪些
分享给朋友:

相关文章

vue切换标签实现

vue切换标签实现

Vue 切换标签实现方法 使用 v-if 和 v-show 指令 v-if 和 v-show 是 Vue 中常用的条件渲染指令,可以根据条件动态显示或隐藏元素。 <template>…

vue实现标签云

vue实现标签云

Vue 实现标签云的方法 标签云(Tag Cloud)是一种常见的可视化方式,用于展示关键词或标签的权重和分布。以下是几种在 Vue 中实现标签云的方法。 使用第三方库 vue-tag-cloud…

vue实现方法有哪些

vue实现方法有哪些

Vue 实现方法 Vue.js 提供了多种方式来实现功能,涵盖基础语法、组件化、状态管理、路由等。以下是一些常见的实现方法: 基础语法与数据绑定 使用 v-model 实现双向数据绑定: <…

vue标签怎么实现缩放

vue标签怎么实现缩放

实现 Vue 标签缩放的常用方法 使用 CSS transform 属性 通过 CSS 的 transform: scale() 属性可以直接实现元素的缩放效果。在 Vue 中可以通过绑定样式或类名动…

vue实现多标签选择

vue实现多标签选择

Vue 实现多标签选择 使用 v-model 和数组绑定 在 Vue 中,可以通过 v-model 绑定一个数组来实现多标签选择。适用于 checkbox 或自定义多选组件。 <templat…

vue路由实现有哪些

vue路由实现有哪些

Vue 路由实现方式 Vue 路由主要通过官方库 vue-router 实现,支持多种路由模式和功能扩展。以下是常见的实现方式和技术细节: 基础路由配置 安装 vue-router 后,在项目中定义…