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

在 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 内置组件的详解。

相关推荐
angerdream2 小时前
最新版vue3+TypeScript开发入门到实战教程之路由详解三
前端·javascript·vue.js
数据潜水员4 小时前
三层统计最小力度的四种方法
javascript·vue.js
英俊潇洒美少年5 小时前
Vue3 的 JSX 函数组件,每次更新都会重新运行吗?
前端·javascript·vue.js
Irene19917 小时前
Vue3 响应式系统核心对比:effect, track, trigger,computed, watch, watchEffect
vue.js
saadiya~7 小时前
从插件冗余到极致流畅:我的 Vue 3 开发环境“瘦身”实录
前端·javascript·vue.js
慧一居士8 小时前
Zod 功能、使用场景介绍以及对应场景使用示例
前端·vue.js
Irene19918 小时前
Vue3 举例说明如何编写一个自定义组合式函数(与 Mixins 相比的优势)
vue.js
小马_xiaoen8 小时前
Vue 3 + TS 实战:手写 v-no-emoji 自定义指令,彻底禁止输入框表情符号!
前端·javascript·vue.js
Highcharts.js8 小时前
Highcharts Gantt 实战:从框架集成到高级功能应用-打造现代化、交互式项目进度管理图表
前端·javascript·vue.js·信息可视化·免费
终端鹿8 小时前
setup 语法糖从 0 到 1 实战教程
前端·javascript·vue.js