-
2021-01-27 14:41:46
wxml文件: <view class="tab-title" data-current="8" bindtap="swichNav"> <image class="img-tab" src="../../images/maoyan.png"></image> <view class="tab-item {{currentTab==8?'active':''}}">猫眼</view> </view> 现在想在js文件中获取data-current="8"中的值:8 swichNav:function(e){ var that = this; // var current=e.target.dataset.current; // 一般情况下,可以使用这种 var current=e.currentTarget.dataset.current; // 由于我这儿是在循环中所以必须target改成currentTarget if(that.data.currentTab==current){ return false; }else{ that.setData({ currentTab:current }) } },
更多相关内容 -
微信小程序 bindtap 传参
2021-01-07 07:55:54微信小程序 bindtap 传参 //index.wxml //index.js page({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我是固定参数 } }); 可以看出 参数是通过给标签设置 data-参数名=“参数... -
【填坑指南】小程序 view使用bindtap传值问题
2021-03-29 21:06:31如图,view标签 加 bindtap事件,用data-name传值,如果view中只有文字,点击整个view区域都可以接收到data-name的值,如果view里面加一个lable标签,那么点击lable包裹的区域,data-name取不到值。 解决方法:把... -
微信小程序实现bindtap等事件传参
2020-10-17 05:13:35主要介绍了微信小程序实现bindtap等事件传参,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
微信小程序bindtap事件与冒泡阻止详解
2020-11-30 23:16:36<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //... -
微信小程序视图控件与bindtap之间的问题的解决
2020-10-17 05:13:52主要介绍了微信小程序视图控件与bindtap之间的问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2020-10-17 04:49:46主要介绍了微信小程序BindTap快速连续点击目标页面跳转多次问题处理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
navigator 跳转url传递参数,bindtap等事件传参
2021-03-29 20:01:03作者:向朔1992,来自原文地址 一:navigator 跳转url传递参数 (此图片来源于网络,如有侵权,请联系删除! ) 使用方法说明 (1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &... -
微信小程序历险记:表单取值为字符串,生命周期,bindtap事件遇上bindtouchend事
2021-03-29 19:56:25分享者:meahu,来自原文地址 一:表单取值为字符串 input 有这样的事件:bindinput、bindfocus、bindblur、bindconfirm,通过这些事件能拿到表单的相关信息。 如 function bindinput(e){ ... -
bindtap点击无响应-zindex.rar
2021-12-28 16:53:00`position: relative;z-index: -1;`时,子控件无法点击 -
微信小程序事件 bindtap bindinput代码实例
2020-10-16 12:46:21主要介绍了微信小程序事件 bindtap bindinput代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
微信小程序 bindtap 传参的实例代码
2020-12-28 18:19:21微信小程序 bindtap 传参 ,代码如下所示: //index.wxml <view bindtap=changeIndex data-src=我固定参数> //index.js page({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我是... -
微信小程序小技巧系列《十一》canvas中的save和restore,view使用bindtap传值 ...
2021-03-29 20:26:36一:canvas中的save和restore 一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~ 看效果: (此图片来源于网络,如有... -
踩坑:触发bindlongtap同时触发bindtap,wx.request带参数发生错误,bindtap 多次点击
2021-03-29 19:58:33一:当一个元素上同时绑定了bindtap与bindlongtap的时候触发bindlongtap同时依然会触发bindtap 分享者:bug_zero,原文地址 解决方案: 由于目前在微信小程序上bindlongtap被放置在bindtap后面触发,同时bindtap... -
微信小程序bindtap与catchtap的区别
2021-09-13 11:22:121、什么是事件 (1)事件是视图层到逻辑层的通讯... (1)简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。 (2)函数tapName会接受一个参数event,eve...1、什么是事件
(1) 事件是视图层到逻辑层的通讯方式。
(2) 事件可以将用户的行为反馈到逻辑层进行处理。
(3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
(4) 事件对象可以携带额外信息,如 id,dataset,touches
2、如何使用事件
(1) 简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。
(2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息
(3) 标签元素
1
<
view
id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </
view
>
(4) 绑定事件
1
2
3
4
5
Page({
tapName:
function
(event) {
console.log(event)
}
})
3、bindtap和catchtap的区别
(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。
4、小程序中事件分为冒泡事件和非冒泡事件。
(1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件
(2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡
(3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡
5、例子
1、假如有三个view点击事件都是用的bindtap,三个view是层级包含关系?
1
2
3
4
5
6
7
8
9
<
view
id="outer" bindtap="out">
outer view
<
view
id="middle" bindtap="middle">
middle view
<
view
id="inner" bindtap="inner">
inner view
</
view
>
</
view
>
</
view
>
2、我么在js里代码是在相对应的事件打印出log,代码如下?
1
2
3
4
5
6
7
out:
function
(e){
console.log(
"--out bindtap click"
)
}, middle:
function
(e) {
console.log(
"--middle bindtap click"
)
}, inner:
function
(e) {
console.log(
"--inner bindtap click"
)
}
3、bindtap执行结果
点击out view打印出一条log --> out bindtap click
点击middle view打印出两条log --> middle bindtap click--out bindtap click
点击innew view打印出三条log --> inner bindtap click--middle bindtap click--out bindtap click
可以看出bindtap不阻止向上冒泡,所以点击inner一直冒泡到了最外层。
4、如果我们只修改middle view的bindtap为catchtap
点击out view打印出一条log --> out bindtap click(因为没有上层元素故而无法向上冒泡)
点击middle view打印出一条log --> middle bindtap click(catchtap阻止向上冒泡)
点击innew view打印出两条log --> inner bindtap click--middle bindtap click(catchtap阻止向上冒泡)
-
微信小程序开发之——bindtap点击无响应
2021-12-28 17:00:43一 现象 当父控件的属性同时为:position: relative;z-index: -1;时,子控件无法点击; position:relative;z-index:-1 ...text bindtap="tapclick">点击</text> <button type="prim一 现象
当父控件的属性同时为:
position: relative;z-index: -1;
时,子控件无法点击;position:relative;z-index:-1 其他 无法点击 可点击 二 示例(不可点击)
2.1 布局文件(zindex.wxml)
<view class="page-container1"> <text bindtap="tapclick">点击</text> <button type="primary" bindtap="buttonclick">我是按钮</button> </view>
2.2 样式文件(zindex.wxss)
.page-container1{ position: relative; z-index: -1; text-align: center; } .page-container1 text{ background: coral; padding: 10rpx 30rpx; } .page-container1 button{ z-index: 100; margin: 20rpx; }
2.3 逻辑文件(zindex.js)
Page({ tapclick(){ console.log("text点击了按钮"); }, buttonclick(){ console.log("按钮被点击了按钮"); } })
三 如何修改
3.1 修改position属性
保持
z-index:-1
不变时,将position修改为除relative
外的其他属性3.2 修改z-index
保持
position:relative
不变,将z-index修改为>=0的值四 参考
-
微信小程序bindtap 与 catchtap 是使用
2019-04-19 14:01:41个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡 下面会有一个demo给出解释, 说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件 官网上这样规定的 事件分类...如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您,
个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡
下面会有一个demo给出解释,
说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件
官网上这样规定的
事件分类
事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
先写一个demo
<view class="intro">
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" bindtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
<view id="inner" bindtap="handleTap4">
inner view1
</view>
</view>
</view>
</view>
</view>
给没一个view设置一个bindtap
在js中打印点击事件
handleTap1:function(){
console.log("=============hly","handleTap1")
},
handleTap2: function () {
console.log("=============hly", "handleTap2")
},
handleTap3: function () {
console.log("=============hly", "handleTap3")
},
handleTap4: function () {
console.log("=============hly", "handleTap4")
},
点击inner view1 的时候看下打印
点击inner view的时候再看下打印
点击middle view的时候在此看下打印
也就是说点击的时候它把最外面的几个也打印了 也是冒泡到其他事件,当然这个时候就是想阻止它了
这个时候点击事件就可以设置catchtab了,
现在把第三个设置catchtap
点击innerview1的时候再看下打印
变成了2个,也就是tap3阻止了其向上冒泡, 当然如果把第四个设置catchtap的话 其也会起到阻止的作用,
至此可以发现,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡
-
微信小程序 bindtap绑定如何传参
2020-09-26 22:01:57在写微信小程序代码的时候,对于前端一个组件需要进行前端向后端绑定,我们可以使用bindtap,如下面的例子: <view bindtap="upload_image">点击上传图片</view> 这里我们使用bindtap进行绑定,填写... -
微信小程序bindtap不生效的解决方法
2022-03-28 17:26:27用bindtap监听输入框的时候不生效可以尝试将基础库调成最新的版本,如下: 详情 -> 调试基础库 -
微信小程序bindtap和carchtap的区别
2021-01-16 18:08:481. 事件 事件是视图层到逻辑层的通讯方式。 事件是将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当触发该事件时,就会执行逻辑层中...view id="box" data-item="item" bindtap="bindHandle">点击 -
【微信小程序---绑定事件bindtap跳转】
2022-02-24 15:16:561.所需要跳转的页面进行 bindtap=“f0” 绑定所需要的地方 2.在js页面进行 f0:function(event){函数指向功能} -
[003]小程序系列 | 标签设置了bindtap无法点击?层级问题!!!
2021-03-06 10:07:402.1将bindtap放在class="video"上(也就是class="item"的父节点上) 2.2将bindtap放在class="tag"上(也就是class="item"的子节点上) 2.3查看页面结构 2.3.1z-index=-1是什么? 2.3.2没注释z-index=-1前效果: ... -
小程序禁用view的bindtap
2021-09-27 15:59:45" bindtap="tapAddCart"></view> pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。 /* Keyword values */ pointer-events: auto; pointer-events: none;...