UniApp 内置组件：`<view>` 和 `<scroll-view>` 详解

在 UniApp 中，<view> 和 <scroll-view> 是两个非常常用的内置组件。本篇文章将详细介绍这两个组件的使用方法，API 和属性。

<view> 组件

简介

<view> 是一个基础容器组件，类似于 HTML 的 div 元素。

示例

<view class="my-view">
  这是一个 view 组件
</view>

属性

• hover-class: 指定按下去的样式类。
• hover-start-time: 按住后多久出现点击态。
• hover-stay-time: 手指松开后点击态保留时间。

事件

• tap: 点击事件
• longpress: 长按事件

<scroll-view> 组件

简介

<scroll-view> 组件用于在小范围内滚动内容。

示例

<scroll-view scroll-y class="my-scroll-view">
  <view v-for="(item, index) in items" :key="index">{{ item }}</view>
</scroll-view>

属性

• scroll-x / scroll-y: 开启横向 / 纵向滚动。
• upper-threshold: 距顶部 / 左边多远时（单位px），触发 scrolltoupper 事件。
• lower-threshold: 距底部 / 右边多远时（单位px），触发 scrolltolower 事件。

事件

• scrolltoupper: 滚动到顶部 / 左边时触发。
• scrolltolower: 滚动到底部 / 右边时触发。
• scroll: 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

---

参考链接

• UniApp 官方文档 - view
• UniApp 官方文档 - scroll-view

在这篇文章中，我们详细介绍了 UniApp 的 <view> 和 <scroll-view> 组件，包括了各自的属性和事件。希望能帮助您更有效地使用这两个组件。

请继续关注，后续将有更多 UniApp 内置组件的详解。