uni-app常用标签详解_uniapp 标签

1. <view>

<view> 是 uni-app 中最基本的组件之一，用于在页面中创建一个视图容器。它类似于 HTML 中的 <div> 标签，可以用来包裹其他组件或者作为布局容器使用。

示例代码：

<view class="container">
  <text>Hello, uni-app!</text>
</view>

2. <text>

<text> 用于显示文本内容，类似于 HTML 中的 <span> 标签。可以设置字体大小、颜色、样式等属性。

示例代码：

<text class="title">Welcome to uni-app!</text>

3. <image>

<image> 用于显示图片，可以设置图片的路径、宽度、高度等属性。

示例代码：

<image src="/static/logo.png" class="logo"></image>

4. <button>

<button> 用于创建一个按钮，可以设置按钮的样式、文本内容以及点击事件。

示例代码：

<button class="btn" @click="handleClick">Click me!</button>

5. <input>

<input> 用于创建一个输入框，可以接收用户的输入。可以设置输入框的类型、默认值、占位符等属性。

示例代码：

<input type="text" class="input" placeholder="请输入用户名"></input>

6. <swiper>

<swiper> 用于创建一个轮播图组件，可以展示多张图片或者其他内容。可以设置轮播图的切换效果、自动播放等属性。

示例代码：

<swiper class="swiper" autoplay>
  <swiper-item>
    <image src="/static/banner1.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/static/banner2.png"></image>
  </swiper-item>
</swiper>

7. <list>

<list> 用于创建一个列表，可以展示多个数据项。可以设置列表的样式、滚动方向等属性。

示例代码：

<list class="list">
  <list-item v-for="item in listData" :key="item.id">
    <text>{{ item.title }}</text>
  </list-item>
</list>

8. <form>

<form> 用于创建一个表单，可以包含多个输入项。可以设置表单的提交事件、验证规则等属性。

示例代码：

<form class="form" @submit="handleSubmit">
  <input type="text" class="input" placeholder="请输入用户名"></input>
  <input type="password" class="input" placeholder="请输入密码"></input>
  <button type="submit" class="btn">登录</button>
</form>

以上是 uni-app 中常用的一些标签的介绍和示例代码。希望对您有所帮助！