uniapp 10--view组件的基本使用

最新推荐文章于 2025-06-24 17:07:28 发布
原创 最新推荐文章于 2025-06-24 17:07:28 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入讲解了view组件的hover效果，包括hover-class设置按压样式，hover-stop-propagation阻止事件冒泡，以及hover-start-time和hover-stay-time控制效果显示和持续时间。通过实例演示了如何精细控制用户交互体验。

view组件的基本使用

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

hover-class :按下去的样式

在这里插入图片描述
在这里插入图片描述
代码：
在这里插入图片描述
结果：
在这里插入图片描述
在这里插入图片描述
点击之后：由绿色变为红色
在这里插入图片描述

hover-stop-propagation:阻止冒泡状态

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击小的绿色的会使小的变成红色，大的变成粉红色。
但是点击大的只有大的编程粉红色
因为大的是父级，小的是子级，子级变父级变，父级变子级没有资格变
在这里插入图片描述
所以用hover-stop-propagation来阻止冒泡行为：
在这里插入图片描述
结果就是：点击绿色的只有绿色的变成红色
点击蓝色的只有蓝色的变成粉红色（独自美丽，无不干扰）
在这里插入图片描述
在这里插入图片描述

hover-start-time“按住之后延迟多少出现点击后状态

在这里插入图片描述
在这里插入图片描述
点击之后2s出现效果（绿色变成红色）
在这里插入图片描述

hover-stay-time:点击之后，点击后状态保持的时间

在这里插入图片描述

在这里插入图片描述
2s之后才会消失（由红色变回绿色）
在这里插入图片描述

uniapp中scroll-view组件scroll-into-view的使用
记录本人工作中遇到的问题、经验总结以及分享。
11-01 8401
目的：让 scroll-view组件自动定位到当前月份，比如11月。
uniapp ---- 树组件
weixin_44235759的博客
12-02 3557
<u-popup v-model="treeShow" mode="bottom" height="700rpx" border-radius="28"> <view class="popTitle"> <text>请选择责任单位：</text> <u-button size="mini" type="primary" style="margin-left:60rpx" @click="popOK">确定</u-button&g
uniapp条件判断app,H5,微信小程序端
热门推荐
m0_58849641的博客
08-01 1万+
代码】uniapp条件判断app,H5,微信小程序端。
微信小程序开发初学：视觉容器--view
2401_84010107的博客
04-16 675
（hover-start-time和hover-stay-time属性在实际开发中应用较少）指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果。按住后多久出现点击态（hover-class的样式）95%以上前端开发知识点，真正体系化！指定是否阻止本节点的祖先节点出现点击态。默认值：200（单位毫秒）默认值：50（单位毫秒）手指松开后点击态保留时间。类型：boolean。
关于 uniapp view标签使用 hover-class属性不生效问题解决
qq_kary的博客
12-08 2143
关于 uniapp view标签使用 hover-class属性不生效问题解决
uni-app 安装和使用“u-view(uView)”UI框架
PrimaryColor
07-03 4300
v-view官网：https://www.uviewui.com/ 本篇文章不采用npm安装。 一、下载u-view相关源码。 下载地址：https://ext.dcloud.net.cn/plugin?id=1593 解压后，将里面的所有内容全部复制到自己的项目根目录中， 二、引入相关依赖。 1.首先在main.js，引入并使用uView的JS库。 // main.js import uView from "uview-ui"; Vue.use(uView); 2.在项目根目录的u.
Uniapp match-media 检测节点 适配大屏小屏 不同屏幕视图组件
09-10
在 `uni-app` 中，这个过程可以简化为直接使用内置的 `match-media` 组件。只需在模板中声明组件，并传递媒体查询规则作为属性： ```vue <uni-match-media :query="(min-width: 600px)"> <view>大屏幕内容</view> ...
uniapp框架-markdown富文本编辑器插件-uni-app项目源码-vue语法格式.zip
05-21
它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和插件生态系统，为开发者提供了丰富的资源和技术支持。从多级选择器到自定义导航栏，再...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
3. **引入组件**：在uni-app项目中，使用`scroll-view`组件非常简单，只需在页面的`.vue`文件中通过`<template>`标签引入，然后在`<script>`部分注册组件，例如： ```html <view> <scroll-view :scroll-x="true...
uniapp 中安装使用 uView ui 框架 (适合新创建的项目，老项目的使用npm的方式更稳妥点)
业余前端的职业经历
12-03 1971
哎 本来 博主 不是从事uniapp 的开发人员 但是对 uniapp的关注 还是挺上心的 当年 这个ui框架出来的 那一刻 我还去 看了看 赞助了点钱呢 这框架 还是挺厉害 其实 我还是很像从事 uniapp 开发呢 奈何 所在的几家公司 都不用 尴尬了 希望下家公司会用到 吧 哈哈 好了 我们 步入正题了 1. 首先 就是 先去 下载 插件包 https://ext.dcloud.net.cn/plugin?id=1593 2. 用 hbuil...
uni-app使用通过判断让两个内容显示一个
Wx001214的博客
11-06 253
如果status为3显示在线，如果status为4显示离线。
uni-app中的视图组件是用于构建应用界面的基本元素，类似于网页开发中的HTML标签
BLOG域名:programb.blog.youkuaiyun.com
10-01 1272
uni-app中的视图组件是用于构建应用界面的基本元素，类似于网页开发中的HTML标签。这些组件可以包含文本、图片、按钮等其他组件，并且可以通过属性和事件来实现丰富的交互功能。以下是一些常见的视图组件及其用途：view：这是最基础的视图容器组件，类似于HTML中的标签。它用于包裹其他组件，以便更好地控制样式和布局。scroll-view：这是一个可滚动的视图容器，适用于需要展示大量内容但屏幕空间有限的情况。它支持纵向和横向滚动，并可以通过属性设置滚动的距离和惯性。swiper：这是一个滑块视图容器，通常用于
uni-app view组件基本使用
yasinawolaopo的博客
12-21 6441
uni-app view基本使用
uni-app带你看一个不一样的view之hover-class
weixin_45966674的博客
11-21 5985
这样你就会发现 你点击后它不会立刻触发hover-class了 而是会等待hover-start-time 所设置的时间后再触发。hover-start-time要的是个纯数字 所以我们要在属性前加上 : 熟悉vue的朋友们一定知道是什么意思。这样你会发现，默认展示bdo的样式 当你点击时 会出现bdo1的样式 过会儿又变回bdo的样式。当你给父子级都设置了hover-class，你会发现 这鬼东西的触发既然还是冒泡的。这样点击子元素时 父元素的hover-class就不会触发了。
Uniapp——6. 标签＜view＞【 hover-class，hover-start-time，hover-stay-time，disable-scroll】
weixin_63215361的博客
06-24 309
一、< view> 标签📌 简介：< view> 是页面结构中的基础容器标签，类似于 HTML 中的 div，用于布局和包裹其他组件。
uni-app scroll-view可视范围判断
pgLi
06-18 722
scroll-view可视范围判断
uniapp 安装 u-view 组件库
xiaowude_boke的博客
10-19 1911
uni-app安装引入组件
uniapp 引入使用u-view 完整步骤，u-view 样式不生效
小菜鸡，努力中~~
08-29 716
【代码】uniapp 引入使用u-view 完整步骤，u-view 样式不生效。
uniapp web-view上覆盖其他组件
最新发布
08-27
1. **使用 `cover-view` 组件**：`cover-view` 是 UniApp 提供的一种特殊组件，其层级高于 `<web-view>`，可以实现在 `<web-view>` 上覆盖内容。但需要注意的是，`cover-view` 仅支持部分 CSS 样式，如不支持阴影、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值