小程序事件传参bindtap传参数传值

最新推荐文章于 2024-06-10 17:27:52 发布
最新推荐文章于 2024-06-10 17:27:52 发布
阅读量3.9k 收藏 4
点赞数 1
分类专栏： 技术 文章标签： 小程序事件传参 bindtap传参数传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44019016/article/details/100306613
版权

小程序的事件传参数，

 

一、在wxml里

 

1.首先设置 要传的值 data-status(其中status，可以自己自定义，但data-这个不能改）

 

2.然后绑定事件，statusClick

 

 

 

二、在js里

 

 

1.在function里加上event(可自己自定义event这名字）

 

2.然后在event下的cureentTarget.里取dataset,中，设置的data-status，即 status

 

这样就可以在方法里，获取到参数的值。

 

在小程序的框 架里，我们只能遵循小程序的方式去做，

 

不能象JS，那样直接对方法传参，

weixin_44019016
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
#笔记#微信小程序的bindtap如何传参
m0_46526358的博客
02-23 1万+
今天在做一个微信小程序demo的时候发现bindtap并不能直接在函数上进行传参，一开始并不知道怎么解决，因此记录一下以免以后忘记 因为项目的需要，我需要将一个数组中的某个值传给另外一个列表，以方便在其他地方使用，但是按照定向思维进行传参发现会报错 <view bindtap="clickme({{item.word}})">{{item.word}}</view> 当点击abandon1时，并不能实现传递该值的效果 提示信息为： does not have a method
微信小程序-bindtap等事件传参
热门推荐
前端向朔
03-01 21万+
什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息，如 id, dataset, touches。 看图，因为需要传递的数据比较多，所以我们通过dataset携带参数信息。如果只有一个参数，可以通过id来传递。详解（以常见的tap点击事情为例）
【微信小程序】事件传参的两种方式
最新发布
云泽野の编程日记
06-10 1198
事件传参:在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发.小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以 使用 mark 标记传递参数mark 是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据然后通过事件对象进行获取自定义数据,在组件上使用mark:自定义属性。
微信小程序bindtap事件传值 取值
weixin_43795169的博客
03-27 3477
传值 <button bindtap="btn" id="hello" data-cnName="你好" data-name="{{name}}">Button按钮</button> 取值 data:{ name: '名字 ' }, btn(e){ console.log(e.currentTarget.id)； // 'hello' con...
【小程序】关于bindtap传值
Maximus_ckp的博客
02-06 5217
啦啦啦，端正态度，开始写技术博客哼哼~ 刚开始练手，准备模仿朝夕日历的番茄闹钟进行语法以及布局练习：从最简单的需求开始：点击分类，下面多一条红色border表示选中。在Page中定义一个值tagsSelect，作为选项的参数：Page({ ... data: { tagsSelect:0 }, ... })定义一个方法，来接收选项值的改变，从而改变样式： 但如果你这么写，<vie
小程序 bindtap传参
凌霄
10-17 546
记录一下 但是 由于 数据太长的话 会报错VM14233:1 MiniProgramError Unexpected end of JSON input SyntaxError: Unexpected end of JSON input 所以在对数据进行encodeURIComponent转码 var product = encodeURIComponent(JSON.stringify(e.currentTarget.dataset.product)); 接收时使用 var product = JSO
微信小程序 bindtap 传参
01-07
微信小程序 bindtap 传参 //index.wxml //index.js page({ data:{ }, changeIndex(e){ console.log(e.currentTarget.dataset.src); //我是固定参数 } }); 可以看出 参数是通过给标签设置 data-参数名=“参数...
微信小程序实现bindtap等事件传参
10-17
本文主要讲解如何在微信小程序中实现`bindtap`等事件的参数传递，这对于理解小程序的事件机制至关重要。 事件在微信小程序中扮演着视图层与逻辑层通信的角色。当用户在视图层进行操作，比如点击一个按钮或视图组件...
微信小程序 bindtap 传参的实例代码
10-15
总结来说，`bindtap` 事件在微信小程序中是处理用户交互的关键，通过 `data-` 属性可以方便地传递参数到事件处理函数。这种传参方式在处理动态数据、列表遍历和其他需要传递额外信息的场景中非常实用。开发者应熟练...
微信小程序之bindtap事件传参
qq_33358062的博客
10-23 4万+
之前一直以为微信小程序按钮点击事件传参是和web端相同，即在事件中写明所传递的参数即可，但是这样尝试过以后发现小程序的控制台报错，报所写的bindtap中参数错误，之后百度发现，小程序按钮点击这类事件时一般的处理方法是指明元素所在的id，bindtap只是写明函数名，例如，bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e
微信小程序中关于bindtap的问题（传递参数）
哦哦一人
03-29 4885
bindtap： 给某个节点绑定bindtap事件， 指定方法名 但是报错： VM5978 WAService.js:2 Component “pages/xxx/xx” does not have a method “方法名” to handle event “tap”. 此问题是因为 bindtap绑定方法名时不可以给括号 一些新手朋友现在就开始纳闷，如何传递参数？ 这里就需要使用data-xxx 比如： //wxml代码 //如此使用bindtap绑定事件 //传递参数需使用data-xxx //如果
navigator 跳转url传递参数，bindtap等事件传参
03-29
作者：向朔1992，来自原文地址   一：navigator 跳转url传递参数 (此图片来源于网络，如有侵权，请联系删除! ) 使用方法说明 (1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&…….) (2)取值：options 是包含url地址中参数的对象，可以直接 点 获取。 (此图片来源于网络，如有侵权，请联系删除! ) 扩展 JS获取web页面地址栏中的参数。   https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=
微信小程序点击事件bindtap传参
Guoye的专栏
10-11 1947
微信小程序bindtap点击事件如何传参。
微信小程序（五）bindtap事件传递当前循环到的对象
jonssonyan
05-08 1970
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
小程序开发序列(六)事件传参
weixin_34205076的博客
06-12 334
在触发事件后，有时需要有些额外的数据，JS的写法是直接以参数的形式传递。而小程序是react模式的，使用data触发状态变化而刷新界面，绑定的事件里，绑定的是函数的名称，参数无法像一般编码的方式直接传入，那要怎么办？ 小程序提供了一种方式，即daa-xxx，其中data-是标识事件触发时会带上这个参数，xxx是参数名。比如按钮绑定了query事件，需要传入一个产...
微信小程序 bindtap 事件多参数传递
天问博客-专注于大前端技术
12-08 2108
在微信小程序中，我们无法直接通过 bindtap="handleClick(1,2,3)" 的方式传递参数，而是需要通过自定义属性 data- 的方式进行传递，并在事件回调函数中通过 event.currentTarget.dataset 来获取这些参数。然而，这种传参方式不够友好，尤其是在传递多个参数时，需要特别注意参数的形式和命名方式。
小程序中bindtap绑定事件传值的bug
qq_38253549的博客
08-18 818
bindtap点击事件 事件中可以通过data- 来绑定一些值然后点击的时候再 e 里面获取，e为事件对象，可以携带额外信息，如 id, dataset, touches。 e.target和e.currentTarget的区别（做项目时发现的店bug） 如果只绑定在图片或者按钮上获取得到的值是一模一样的。但是如果绑定在view中里面还存在子元素就会出现问题。 <view class="guige" data-index="{{index}}" bindtap="guigeClick"> &l
[小记] 微信小程序小记2(bindtap方法传参,动态修改页面标题)
zhaoweihao的博客
07-23 764
bindtap 方法传参 data-xxx 为自定义属性，可以用于存参数数据，注意xxx不可为驼峰格式(signFlag)-会报错 <view class="btn-area btn-area-active" id="buttonContainer" wx:if="{{activeFlag==='01'}}" data-signflag="on" bindtap="startFaceRec" hover-class="btn-hover"> <text class="btn.
小程序事件绑定 传值和路由
Almee211的博客
11-10 941
自定义事件 1、事件绑定 最主要是tap事件，相当于click 通过属性绑定事件其有两种写法 绑定冒泡事件（不会帮我们阻止冒泡）【主要】 语法：bind事件类型="方法名" 方法名不能加括号，而且不能传参 绑定非冒泡事件（会帮我们阻止冒泡） 语法：catch事件类型="方法名" 方法名不能加括号，而且不能传参 2、事件对象 在小程序中，事件对象是给事件处理程序传递参数的唯一方式。 标签上使用data-数据名=“数据值”的形式传递 <!-- 传递参数100 -
小程序的事件传参和页面传参
06-06
小程序的事件传参和页面传参都是非常常见的场景，具体实现方式如下： ### 事件传参 在小程序中，可以通过 `data-*` 属性将数据传递给事件处理函数。在 WXML 中，通过 `bind:eventName` 或 `catch:eventName` 绑定事件处理函数，例如： ```html <view bind:tap="handleTap" data-id="123">点击我</view> ``` 在事件处理函数中，可以通过 `event.currentTarget.dataset` 获取 `data-*` 属性值，例如： ```javascript Page({ handleTap(event) { const id = event.currentTarget.dataset.id console.log('id:', id) // 输出：id: 123 } }) ``` ### 页面传参 在小程序中，可以通过路由传参的方式将数据传递给目标页面。在源页面中，通过 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转到目标页面，并传递参数，例如： ```javascript wx.navigateTo({ url: '/pages/detail/detail?id=123' }) ``` 在目标页面中，可以通过 `onLoad` 生命周期函数获取路由参数，例如： ```javascript Page({ onLoad(options) { const id = options.id console.log('id:', id) // 输出：id: 123 } }) ``` 需要注意的是，路由参数的类型都是字符串类型，如果需要传递数字或其他类型的数据，需要进行类型转换。例如： ```javascript wx.navigateTo({ url: '/pages/detail/detail?id=' + 123 }) ``` 在目标页面中，需要将字符串类型的参数转换为数字类型，例如： ```javascript Page({ onLoad(options) { const id = parseInt(options.id) console.log('id:', id) // 输出：id: 123 } }) ``` 除了路由传参，还可以通过全局变量、缓存、事件总线等方式进行数据传递。需要根据具体场景选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值