在 UniApp 中,<view>
和 <scroll-view>
是两个非常常用的内置组件。本篇文章将详细介绍这两个组件的使用方法,API 和属性。
<view>
组件
简介
<view>
是一个基础容器组件,类似于 HTML 的 div
元素。
示例
html
<view class="my-view">
这是一个 view 组件
</view>
属性
hover-class
: 指定按下去的样式类。hover-start-time
: 按住后多久出现点击态。hover-stay-time
: 手指松开后点击态保留时间。
事件
tap
: 点击事件longpress
: 长按事件
<scroll-view>
组件
简介
<scroll-view>
组件用于在小范围内滚动内容。
示例
html
<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>
和 <scroll-view>
组件,包括了各自的属性和事件。希望能帮助您更有效地使用这两个组件。
请继续关注,后续将有更多 UniApp 内置组件的详解。