小程序van-button阻止祖先节点出现点击态穿透

于 2023-11-18 19:43:33 发布
阅读量181 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jstnflying/article/details/134482408
版权 
<view hover-class="hover-view">
<van-button>点击</van-button>
</view>

给van-button的祖先节点增加hover-class时点击van-button会祖先节点也会出现点击态，使用了catch也会出现，查看小程序文档有提供阻止祖先节点提供的点击态的属性，van-button目前暂未支持该属性，所以目前给van-button增加了一层view，保证button点击时祖先节点不出现点击态穿透问题
小程序hover相关设置

<view hover-class="hover-view">
  <view hover-stop-propagation="true" catch:tap="click">
    <van-button>点击</van-button>
  </view>
</view>
chahun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序——van-field中的left-icon属性自定义
不迁怒，不贰过。小知识，大智慧。
08-25 4032
**van-field** 输入框控件中的 **left-icon** 属性的自定义怎么实现。
微信小程序点击穿透问题
weixin_43046729的博客
04-28 1万+
本文针对解决微信小程序中遇到的button点击穿透问题 遇到的问题： 当button所在的区域下有textarea的话，点击按钮会使得下方的textarea获得焦点弹出键盘，在开发工具上没有这样的问题 错误方法一： 当时第一个想到了 z-index事实证明不好使还是不好使。 错误方法二： 当时第二个想到了改变一下布局要不了写死在下面，差点被设计和老板打死，强烈不推荐，我已经亲身实验，小姐姐的指甲只...
关于vant组件ActionSheet事件穿透的问题以及解决方案
weixin_40618068的博客
06-28 7129
关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页) 此时我点击评价，弹出actionSheet动作面板 如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击
uniapp 微信小程序和H5的弹窗滚动穿透解决
坐等夕阳落time的博客
10-17 1万+
uniapp 微信小程序和H5的弹窗滚动穿透解决（真的有效）
关于微信小程序如何使用Vant组件
香梨炒虾米的博客
03-31 5076
微信小程序如何使用Vant组件前言一、微信小程序自动查找第二种 前言 今天闲着没事，兴趣来了，想写写微信小程序，用原生的敲，因为懒得原因，不想再去封装一些组件库，就想当Vant，引用Vant真的是一波三折，不用不知道，一用才知道，好了，废话说的差不多了 一、微信小程序自动查找 Vant官网说的其实也挺清楚的， 第一步：npm i @vant/weapp -S --production 第二步：将 app.json 中的 “style”: “v2” 去除， 第三步：修改 project.config.js
微信小程序 van-button添加disabled属性，依然无法禁用按钮，表单可正常提交
weixin_40638616的博客
07-29 4956
原因：通过disabled属性来禁用按钮，禁用的是bind:click事件，无法禁用bindtap事件，我使用的是表单提交，应该调用的是bindtap，所以无法禁用。 解决办法：动态修改van-button里的formType="submit"为空，表单提交功能就失效了。 <view class="signUpCard"> <form bindsubmit="formSubmit"> <van-cell-group title="您好！您的微
微信小程序 van-uploadedr 上传图片并压缩组件
03-15
微信小程序 图片压缩、组件、压缩文件大小数量、可配置、压缩质量可配置 <compress-uploader file-list="{{ fileList }}" max-count="6" bind:after-read="afterRead" bind:delete="deleteClick" quality="0.8" /> ...
van-button调整按键和文本大小
chengduxiannanjin的博客
03-16 1万+
van-button调整按键和文本大小 前言 本人在零基础学习vue+vant时发现的问题和踩的一些坑，只作为分享和记录日常，本人是菜鸡！！！！！！ 项目场景： 使用vant的按键组件van-button 问题描述： 使用van-button时会出现按键的大小无法修改和文本大小也无法修改的问题 解决方案：通过设置样式可以间接改变按键和文本的大小，修改css的参数改变按键的大小，文本也会自动改变。 <div> <van-button class="button" ro
微信小程序 - dialog
03-29
实现了 标题,内容和按钮设置,可动态设置按钮,以及按钮点击事件的回调 可作为component 使用 (此图片来源于网络，如有侵权，请联系删除! ) 直接上代码 (此图片来源于网络，如有侵权，请联系删除! )(此图片来源于网络...
vant 自定义 van-dropdown-item的用法
10-15
本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 Vant UI 中的一个下拉菜单组件，通常用于展示一个可折叠的选项列表。在默认情况下，`van-dropdown-...
基于Vant组件的Vue移动端黑马头条项目Day02 登录注册
qq_39349116的博客
09-11 4071
二、登录注册 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 准备 创建组件并配置路由 1、创建 src/views/login/index.vue 并写入以下内容 <template> <div class="login-container">登录页面</div> </template>
jquery disable按钮（启用、禁用按钮）
热门推荐
wangjun5159的专栏
08-14 8万+
启用按钮： $("#id").attr("disabled","disabled"); 禁用按钮： $("#id").$("#id").removeAttr("disabled");
设置按钮禁用时的样式
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
10-03 5931
前言   按钮有可用和不可用之分，一般按钮不可用时默认是置灰且不可点击的，但是为了配合整个项目的样式和色调，我们需要对不可用的按钮进行样式的调整。 效果展示   按钮可用时的样式：      按钮不可用时的样式：    代码实现 HTML代码： <van-button size="large" :disabled="btnDisabled">我要借款</van-button&gt...
vant组件表单外部的button触发form表单的submit事件
manda Liu的博客
07-07 1万+
有时候根据需求以及布局需要，button按钮需要放在form外部，但是想触发提交事件的同时又想方便地获取表单的值 一、给form表单添加ref属性 <van-form ref="formData" alidate-first @submit="submit"> <van-field readonly v-model="name" name="name" label="姓名" /
Vant Weapp - 去除（清除）＜van-button＞ 按钮组件点击出现灰色背景效果
王佳斌
02-14 3709
前言 正常引入组件后，点击按钮时会出现如下图所示灰色背景效果： 解决方案 TIPS：如果您是小程序普通组件按钮，请参考 官方文档，设置属性 hover-class="none" 即可去掉点击效果。 打开按钮组件所在 wxss 文件，加入以下代码强制取消背景色： .van-button::before{ background-color:transparent!important; } 取消后的效果图： ...
微信小程序是使用vantUI组件
qq_37942845的博客
05-10 2994
1、初始化 npm init //一步步走下去，不懂得可以去学学 npm，很简单 2、安装vant # npm 安装 npm i vant-weapp -S --production # yarn 安装 yarn add vant-weapp --production 3、在微信小程序上左上角 工具 => 构建NPM 成功会出现一个这样的文件夹： 4、使用：安...
Android笔记——Button点击事件几种写法
weixin_30835933的博客
12-04 363
Button点击事件：大概可以分为以下几种： 匿名内部类 定义内部类，实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button的onClick的属性 首先我们简单地定义一个带Button的xml布局文件 　　activity_main.xml: <Button and...
Vue 项目里戳中你痛点的问题及解决办法
大灰狼的小绵羊哥哥的博客
07-07 2266
最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V^列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所有的轮播需求打包...
微信小程序 <van-button>点击变色csdn
最新发布
08-30
微信小程序是一种在微信平台上运行的轻量级应用程序，它能够提供各类功能和服务给用户。其中，<van-button>是一种常用的组件，用于创建按钮。 <button>标签是用于创建 HTML 页面上的按钮元素，而<v-button>是微信小程序中的按钮组件，在实际开发中用于构建用户界面。其中，点击事件可以通过设置按钮的bindtap属性来触发。 要实现按钮点击后变色的效果，可以通过在按钮的bindtap事件中设置样式的方式来实现。在<van-button>中，可以使用默认的样式或者通过设置自定义样式来变换按钮的颜色。 首先，在<wxml>文件中创建一个<v-button>标签作为按钮，设置按钮的bindtap属性来绑定点击事件。在事件处理函数中，通过设置按钮的样式来改变按钮的颜色。 在<van-button>的样式中，可以设置不同状态下按钮的颜色，例如设置在按下时的背景色为红色。可以使用CSS的伪类选择器来设置按钮的不同状态，例如:hover、:active等。 在实际开发中，可以根据需求来设定按钮点击后变色的效果，如改变背景色、边框颜色等。通过合理运用组件和样式设置，可以快速实现按钮点击变色的效果，提升小程序的用户体验。 总之，通过在微信小程序中使用<van-button>组件，并设置点击事件触发按钮样式的变化，可以实现按钮点击后变色的效果。小程序开发者可以根据具体需求和设计风格，自定义按钮的样式，以实现更好的视觉效果和用户交互体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值