uniapp常用组件

写在前面

今天将uniapp中的组件都过了一遍，上手难度不大，但是还是遇到了一些问题：

1. HBuilder实在是太难用，不管是插件生态还是设计之类的，总之就是用的哪哪不顺手
2. 虽然打开内置浏览器是挺方便的，但是不知道是不是其热重载什么的，当你配置路由或者跨页修改时它会出现乱码之类的情况，建议关掉重开
3. 不支持自定义属性……
4. git插件不是很好用……
5. 虽然设置了失去焦点自动保存但是就是很鸡肋感受很不好，建议ctrl+s焊手上
6. 报错功能不完善，像是个别单词拼写错误什么的不报错很难受
7. 我发现各类ai对小程序开发貌似都不太感冒，有点冒傻

关于我写的练习demo

涵盖所有常用组件与常用方法，已上传至github链接请点

还有还有

• 如有纰漏请谅解，以官方文档为准
• 后面这段时间我会学习小程序开发的知识，会持续更新
• 可以查看我的github，后续我会上传我的uniapp相关练习代码
• 有兴趣的话可以浏览我的个人网站，我会在上面持续更新内容，我新配置了评论功能，可以留下一个友善的评论，这对我有很大帮助

text

文本组件。用于包裹文本内容。

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。

虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式

属性说明

space 值说明

子组件

text组件在web浏览器渲染（含浏览器、小程序webview渲染模式、app-vue）和uvue中，可以并只能嵌套text组件。

在nvue中，text组件不能嵌套。

Tips

• 支持 \n 方式换行。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• decode 可以解析的有 < > & ' 。
• 各个操作系统的空格标准并不一致。
• 除了文本节点以外的其他节点都无法长按选中。
• 如果使用 <span> 组件编译时会被转换为 <text>。
• nvue 样式 word-wrap 在 Android 平台暂不支持

scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

主要特性

• 竖向滚动：通过设置 scroll-y="true" 来启用垂直方向上的滚动。
• 横向滚动：通过设置 scroll-x="true" 来启用水平方向上的滚动。
• 固定高度/宽度：对于竖向滚动，需要给 <scroll-view> 设置一个固定的高度；对于横向滚动，则通常需要设置一个固定的宽度。
• 样式控制：可以通过 CSS 控制滚动视图的样式，比如隐藏滚动条等。

注意事项

• 在使用竖向滚动时，必须为 <scroll-view> 设置一个明确的高度。
• 对于横向滚动，需要确保子元素不会换行（即 white-space: nowrap），并且每个子元素都设置了 display: inline-block。
• 当内容较少不足以触发滚动时，滚动条不会出现。
• 不要在 <scroll-view> 中放置原生组件如 map 或 video，特别是在小程序端。
• 避免将过长的数据列表放入 <scroll-view> 中，这可能会导致性能问题。对于长列表，请考虑使用分页加载或虚拟列表技术。

一键回到顶部

总结你提供的方法，可以将实现点击按钮返回顶部功能的关键步骤和代码解释如下：

数据绑定

• 在 Vue 组件的 data() 函数中定义了一个名为 scrollTop 的变量。这个变量与 <scroll-view> 组件的 :scroll-top 属性绑定，意味着当 scrollTop 变量值变化时，滚动视图会自动更新其垂直滚动位置。

事件监听

• 使用 @scroll 事件监听器来捕获滚动事件，并在事件处理函数中更新组件实例中的一个属性（例如 old.scrollTop），用于保存当前滚动位置。这使得可以在需要的时候访问或修改滚动位置。

返回顶部方法

• goTop 方法是实现返回顶部的核心逻辑：
  • 首先，它设置 scrollTop 为当前滚动位置。
  • 然后使用 $nextTick 方法确保 DOM 更新完成后，再次将 scrollTop 设置为 0，以触发滚动到顶部的动作。
  • 此外，还使用了 uni.showToast 来显示一条消息提示用户滚动位置已经被重置为顶部。

goTop: function(e) {
    // 解决视图层不同步的问题
    this.scrollTop = this.old.scrollTop;
    this.$nextTick(function() {
        this.scrollTop = 0;
    });
    uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0"
    })
}

• 在模板中，有一个带有 @tap="goTop" 属性的 <view> 标签，这意味着当用户点击该区域时，将会调用 goTop 方法来执行返回顶部的操作。

swiper

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明

• indicator-dots: 是否显示面板指示点，默认为 false。
• autoplay: 是否自动切换，默认为 false。
• interval: 自动切换时间间隔，默认为 5000ms。
• duration: 滑动动画时长，默认为 500ms。
• circular: 是否采用衔接滑动，默认为 false。如果设置为 true，则可以实现无缝滚动效果。
• vertical: 是否纵向模式，默认为 false。如果设置为 true，则变为上下滑动。
• current: 当前所在滑块的索引值，默认为 0。

事件监听

• @change: 轮播图切换时触发，可以通过此事件获取当前索引。

  示例：

  <swiper @change="swiperChange">
    <!-- ... -->
  </swiper>
  

  methods: {
    swiperChange(e) {
      console.log('当前索引：', e.detail.current);
    }
  }
  

注意事项

1. 性能优化：当轮播图中的图片较多或者较大时，建议进行图片懒加载处理，以提高页面加载速度。
2. 样式调整：根据实际需求调整 <swiper> 和 <swiper-item> 的样式，比如高度、宽度等。
3. 兼容性：确保在不同平台（如微信小程序、H5等）上测试轮播图的表现，因为各平台可能存在细微差异。

通过上述配置和属性设置，你可以轻松创建一个功能齐全且美观的轮播图组件。此外，结合其他自定义样式或交互逻辑，可以让轮播图更加符合你的项目需求。

movable-view

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

以下是 movable-view 组件的属性说明，根据你提供的信息整理而成：

icon

属性说明

各平台 type 有效值说明：

rich-text

富文本。

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress.

progress

checkbox-group

属性说明

checkbox

多选项。在1组check-group中可选择多个

属性说明

Button

在UniApp中，<button> 组件是一个非常基础且重要的组件，用于创建按钮。它不仅支持文本内容，还可以嵌套其他组件，如图片、图标等，并提供了丰富的属性和事件来增强交互性。

基本用法

<template>
  <view>
    <button type="primary" @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
};
</script>

属性说明

• type: 按钮的样式类型，可选值包括 primary（主色调）、default（默认样式）、warn（警告色）。默认为 default。

  示例：

  <button type="primary">主要按钮</button>
  <button type="default">默认按钮</button>
  <button type="warn">警告按钮</button>
  

• size: 按钮大小，可选值有 default（默认大小）、mini（小尺寸）。

  示例：

  <button size="default">默认大小</button>
  <button size="mini">小型按钮</button>
  

• plain: 是否镂空，即背景透明，默认为 false。

  示例：

  <button plain>镂空按钮</button>
  

• disabled: 是否禁用，默认为 false。

  示例：

  <button disabled>禁用按钮</button>
  

• loading: 是否显示加载图标，默认为 false。

  示例：

  <button loading>加载中</button>
  

事件监听

• @click: 点击事件。

  示例：

  <button @click="handleClick">点击事件</button>
  

  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
  

样式自定义

尽管 <button> 组件提供了多种预设样式，但你也可以通过自定义类名或内联样式来进一步定制按钮的外观。

<template>
  <view>
    <button class="custom-button" type="primary">自定义样式按钮</button>
  </view>
</template>

<style>
.custom-button {
  background-color: #1AAD19;
  color: white;
  font-size: 20px;
}
</style>

注意事项

1. 平台差异：不同平台（如微信小程序、H5等）对 <button> 的渲染可能存在细微差别，请务必进行跨平台测试。
2. 嵌套限制：虽然 <button> 支持嵌套其他组件，但在某些平台上可能会有限制或不一致的行为。建议尽量保持简单的内容结构。
3. 用户体验：考虑使用不同的 type 和状态（如 disabled 或 loading）来提供更好的用户反馈。

Switch

<switch> 组件用于切换选择器（开关），允许用户在两种状态之间进行选择。

基本用法

<template>
  <view>
    <switch :checked="isSwitched" @change="onSwitchChange" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSwitched: false,
    };
  },
  methods: {
    onSwitchChange(e) {
      this.isSwitched = e.detail.value;
      console.log('Switch状态:', this.isSwitched);
    }
  }
};
</script>

属性说明

• checked: 开关是否被选中，默认为 false。
• type: 样式类型，可选值 switch 或 checkbox，默认是 switch。
• color: switch 打开时的背景色。
• disabled: 是否禁用，默认为 false。

Input

<input> 组件用于接收文本输入或其它类型的输入（如数字、密码等）。

基本用法

<template>
  <view>
    <input type="text" placeholder="请输入内容" v-model="inputValue" @input="onInput" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(e) {
      console.log('输入的内容:', e.detail.value);
    }
  }
};
</script>

属性说明

• type: 输入框类型，支持 text, number, idcard, digit, password 等。
• placeholder: 输入框为空时占位符文本。
• value: 输入框的初始值，可通过 v-model 实现双向绑定。
• disabled: 是否禁用输入框，默认为 false。
• maxlength: 最大输入长度，设置为 -1 表示不限制长度。

Textarea

<textarea> 组件用于多行文本输入。

基本用法

<template>
  <view>
    <textarea placeholder="请输入多行文本" v-model="textareaValue" @input="onTextareaInput"></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textareaValue: ''
    };
  },
  methods: {
    onTextareaInput(e) {
      console.log('输入的多行文本:', e.detail.value);
    }
  }
};
</script>

属性说明

• placeholder: 文本区域为空时显示的提示信息。
• value: 文本区域的初始值，同样可以通过 v-model 实现双向数据绑定。
• auto-height: 是否自动增高，默认为 false。如果设置为 true，则可以根据输入内容自动调整高度。
• disabled: 是否禁用文本区域，默认为 false。
• maxlength: 最大输入长度，设置为 -1 表示无限制。

uniapp组件的显示类型

在UniApp中，组件的显示类型（行内、块级等）和HTML标准元素类似，但也有其特定的组件库。

块级组件

这些组件默认情况下占据父容器的整个宽度，并且独占一行。

行内组件

这些组件不会独占一行，而是与其他行内组件并排显示。

行内块级组件

这些组件既具有行内元素的特点又具备块级元素的一些特性，比如可以设置宽高。

特殊组件

还有一些组件因其特殊用途而不能简单归类为上述任意一种显示类型。