bindtap绑定函数如何获取被点击的元素和属性值

最新推荐文章于 2023-03-16 11:20:05 发布
最新推荐文章于 2023-03-16 11:20:05 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： 小程序 文章标签： 微信 函数 解决方案
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kincaid_z/article/details/78395620
版权

1.在绑定的元素上设置如下

 <image src="{{item.img}}" mode="aspectFill" data-param="{{parameter}}" bindtap="tapTest" />

2.在js里取出来   data的值 

tapTest: function (e) {
   console.log(e.target.dataset.param)
//做其他处理
  },


余年不负韶华
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序之绑定点击事件实例详解
08-30
当用户点击按钮时，该函数将被触发，并将 name 属性的值修改为“杨磊”。 微信小程序之绑定点击事件实例详解是微信小程序开发中的一项重要技术，通过本文，我们可以了解到如何添加底部标签栏和如何通过 button 来...
详解小程序如何动态绑定点击的执行方法
10-15
这里使用`data`属性将菜单项的数据绑定到视图元素上，便于在事件处理函数中获取： ```html wx:for="{{menuListNormal}}" wx:key="{{item.id}}" data-index="{{item.id}}" data-type="{{item.type}}" data-...
微信小程序（五）bindtap事件传递当前循环到的对象
jonssonyan
05-08 1961
wxml <i-card wx:for="{{products}}" wx:key="*this" data-product="{{item}}" title="{{item.name}}" bindtap="cardClick" full="true"> <view slot="content">创建时间：{{item.createTime}}</view> </i-card> js Page({ cardClick: fu
小程序 bindtap和catchtap 例子展示
jack_rose_me的博客
10-22 413
bindtap和catchtap都属于点击事件函数，将事件绑定到组件上，点击组件后可以触发函数。 二者的区别在于是否冒泡事件。 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 举一个例子说明： wxml部分： 说明：由以上代码可以看到，总共包含了三个view，其中id=outer 为最外层的父节点，绑定了bindtap事件；id=middle，绑定了catchtap事件，是id=inner 的父节点；id=inn
小程序的点击事件bindtap和catchtap区别
wanan1215的博客
03-16 2007
(1) 事件是视图层到逻辑层的通讯方式。(2) 事件可以将用户的行为反馈到逻辑层进行处理。(3) 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。(4) 事件对象可以携带额外信息，如 id,dataset,touches。
微信小程序-页面bindtap绑定点击方法，传递当前被点击的数据信息（如id等）
莫宛的博客
12-13 5708
文章目录介绍wxml代码 bindtap绑定handleCheckbox方法js代码 通过e接收接收数据详细示例wxml页面代码js代码接收到的数据 介绍 可以通过在wxml页面标签内添加data-id="{{item.goods_id}}"属性，来向绑定的方法传递数据，通过方法的e.currentTarget.dataset.id获取 。 **注意：**标签中的属性名定义为data-id，则dataset中的属性名为id；如果标签中属性名定义为data-goodsId，则dataset中的属性名为goo
微信小程序_bindtap获取不到参数
Onion的博客
03-23 1941
bindtap的基础用法是 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> Page({ tapName: function(event) { console.log(event) } }) 控制太输出： { "type":"tap", ...
微信小程序开发之改变data中数组或对象的某一属性值
08-27
当用户点击某一项时，我们将该项的`selected`属性值设置为`focus`，以便实现点击某一元素动态改变数组中的某一属性值。 知识点4：数据更新 在微信小程序中，我们需要更新数据时，需要使用`this.setData`方法来更新...
微信小程序如何像vue一样在动态绑定类名
08-27
5. 绑定值：Vue使用冒号：来绑定变量的值为元素的某个属性，微信小程序使用两个大括号括起来来绑定变量的值为元素属性。 6. 绑定事件传参：Vue可以在函数后面的括号里传参数，微信小程序只能传函数名，并在函数中...
微信小程序实现点击空白隐藏的方法示例
10-16
在示例中，`<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>` 是一个用来作为蒙层的视图，其中 `wx:if="{{mengShow}}"` 控制蒙层的显示与隐藏，`bindtap='outbtn'` 绑定了一个点击事件，当点击蒙层...
微信小程序bindtap事件与冒泡阻止详解
11-30
bindtap就是点击事件 在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行 在后台.js文件中定义tapMessage函数: //index.js Page({ data: { mo: 'Hello World!!', userid : '1234', }, // 定义函数 tapMessage: function(event) { con
微信小程序获取自定义属性的值
stromGui同视
10-30 1万+
之前写小程序用到自定义属性，今天说说所这个自定义属性吧，希望可以帮到各位兄弟。有个小坑得填填首先看看wxml<view class='box' bindtap='getValue'> <view class='first' data-num="1024" data-name="张三">第一个view</view> <view class='second' data-age="2017
微信小程序-bindtap等事件传参
热门推荐
前端向朔
03-01 21万+
什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 看图，因为需要传递的数据比较多，所以我们通过dataset携带参数信息。如果只有一个参数，可以通过id来传递。详解（以常见的tap点击事情为例）
小程序 view组件bindtap事件及获取值的方式
Kuyun168的专栏
07-27 1万+
xx.wxml 代码： &lt;view bindtap="bindName" data-id="123"&gt;&lt;/view&gt; xx.js 代码： 在js中添加如下代码 page({ data:{ id:'' }, bindName: function(e){ var that = this //获取view组件bindtap事件的值 var id = e.cu...
微信小程序 - 绑定事件 bindtap（包括是否传入参数）
sunshime的博客
09-16 4万+
  小程序绑定事件的方式有很多种，这里我只对bindtap的绑定方式进行介绍，其他的绑定方式也是差不多这样的。 1、不带参数的绑定方式 index.wxml文件中：share表示绑定的事件名称 <view class='enjoy' bindtap='share'>立即分享</view> index.js文件中： share(){ console.log('分享。...
微信小程序-bindtap事件传递参数
u012275249的博客
12-14 1万+
第一步，绑定事件，定义传递的参数，注意这个参数experienceid一定要小写，如果采用驼峰命名的方法，小程序编译器也会强制的转为了小写，我在这里浪费了好多时间，最后调试打印event.currentTarget.dataset 里面的值才发现的，如果需要，可以通过 - （中划线）来连接单词，如下图所示 然后在对应的JS文件里面接受到数据，如下图所示。 就是这么简单就搞定了，顺便讲讲页面如何跳转...
bindtap事件
竹映平昔
01-06 4万+
一、bindtap事件 在wxml文件中绑定bindtap事件， C语言资料下载 然后在js文件中进行响应 Page({ TZdown: function () { wx.navigateTo({ url: '../download/download' }); } })这样在单机view层的时候就会跳转到指定的UR
【小程序】获取自定义属性
dengsunqin1270的博客
12-12 153
<view bindtap="getDataAttr" data-postId="{{postId}}" data-id="id" class="div"> </view> getDataAttr:function(e){ console.log(e.currentTarget.dataset.id) console.log(e.curren...
bindtap获取不到数据
AinUser的博客
01-27 471
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文.
bintap绑定多个值
最新发布
07-15
在微信小程序中，`bindtap` 是用于绑定点击事件的属性，它默认只能绑定一个事件处理函数。如果您想要绑定多个值，可以使用以下两种方法： 1. 使用 `data-*` 自定义属性： 在 WXML 中，您可以使用 `data-*` 自定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值