uniapp常用组件

UniApp 基于 Vue.js 语法，提供丰富的跨平台组件。以下为高频组件及其典型应用场景：

---

一、视图容器类

1. <view>

   • 作用：基础容器，类似 HTML 的 <div>。
   • 场景：页面布局、嵌套内容、Flex 布局容器。

   <view class="container">
     <text>内容区域</text>
   </view>
   

2. <scroll-view>

   • 作用：可滚动视图区域。
   • 场景：长列表、局部滚动区域（如聊天记录）。

   <scroll-view scroll-y="true" style="height: 300rpx;">
     <view v-for="item in list">{{ item }}</view>
   </scroll-view>
   

3. <swiper>

   • 作用：轮播容器，需搭配 <swiper-item>。
   • 场景：Banner 广告、图片轮播、引导页。

   <swiper autoplay interval="3000">
     <swiper-item><image src="/banner1.jpg"></swiper-item>
     <swiper-item><image src="/banner2.jpg"></swiper-item>
   </swiper>
   

---

二、基础内容类

1. <text>

   • 作用：文本显示，不支持嵌套视图组件。
   • 场景：纯文本内容（如标题、描述）。

   <text selectable>{{ userInfo.name }}</text> <!-- 支持长按复制 -->
   

2. <rich-text>

   • 作用：渲染富文本（HTML/String）。
   • 场景：新闻详情、商品描述等带格式文本。

   <rich-text :nodes="htmlContent"></rich-text>
   

---

三、表单组件

1. <input>

   • 作用：输入框。
   • 场景：登录表单、搜索框。

   <input v-model="keyword" placeholder="请输入关键词" />
   

2. <button>

   • 作用：按钮。
   • 场景：提交操作、跳转链接。

   <button type="primary" @click="submit">提交</button>
   

3. <picker>

   • 作用：滚动选择器。
   • 场景：日期选择、下拉选项（如省市区）。

   <picker mode="date" @change="onDateChange">
     <view>选择日期：{{ selectedDate }}</view>
   </picker>
   

---

四、媒体组件

1. <image>

   • 作用：图片显示，支持懒加载。
   • 场景：头像、商品图、背景图。

   <image src="/logo.png" mode="aspectFit"></image>
   

2. <video>

   • 作用：视频播放器。
   • 场景：课程视频、产品演示。

   <video src="video.mp4" controls></video>
   

---

五、导航组件

1. <navigator>
   • 作用：页面跳转链接。
   • 场景：底部 Tab 切换、详情页跳转。

   <navigator url="/pages/detail?id=1" open-type="navigate">
     <text>查看详情</text>
   </navigator>
   

---

六、扩展组件

1. <uni-icons>（需安装 uni-ui）

   • 作用：图标库。
   • 场景：操作按钮（收藏、分享）。

   <uni-icons type="heart" size="30" @click="like"></uni-icons>
   

2. <uni-list>（需安装 uni-ui）

   • 作用：高性能列表。
   • 场景：消息列表、商品列表。

   <uni-list>
     <uni-list-item title="标题" note="描述"></uni-list-item>
   </uni-list>
   

---

使用建议

1. 跨平台适配：

   • 使用 rpx 替代 px 实现响应式布局。
   • 通过 条件编译 处理平台差异：

     // #ifdef H5
     console.log("仅在H5生效");
     // #endif
     

2. 性能优化：

   • 长列表用 <scroll-view> 替代全局滚动。
   • 图片懒加载：<image lazy-load>。

3. 组件库扩展：

   • 官方扩展：uni-ui 提供 60+ 增强组件。
   • 安装：npm install @dcloudio/uni-ui

---

示例：综合表单页面

<template>
  <view class="form-container">
    <input v-model="form.name" placeholder="姓名" />
    <picker mode="region" @change="onRegionChange">
      <view>地区：{{ form.region.join('-') }}</view>
    </picker>
    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: { name: "", region: [] }
    };
  },
  methods: {
    onRegionChange(e) {
      this.form.region = e.detail.value;
    },
    submit() {
      uni.request({ url: "/api/submit", data: this.form });
    }
  }
};
</script>