bind:tap="onLike" 中不能添加参数 及 dataset 传值

最新推荐文章于 2024-11-09 18:12:50 发布
转载 最新推荐文章于 2024-11-09 18:12:50 发布 · 229 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/qq254980080/p/10681203.html

本文详细解析了微信小程序中bindtap事件如何正确传递参数，避免常见的'onLike(id)'函数调用错误，介绍了data-value属性的使用方法，并通过实例展示了如何在组件中定义数据并传递给页面。 
<view bind:tap="onLike({{id}})"></view>

//Component "pages/book-detail/book-detail" does not have a method "onLike(7)" to handle event "tap".

//bind:tap 中函数如果加参数，小程序会默认寻找 onLike(7)(){}这个函数

//bind:tap 引号中的内容全部看出函数名

 

如果需要传值，组件中用data-value

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

 

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>

 

Page({
  bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

 

转载于:https://www.cnblogs.com/qq254980080/p/10681203.html

小程序事件绑定 传值和路由
Almee211的博客
11-10 1045
自定义事件 1、事件绑定 最主要是tap事件，相当于click 通过属性绑定事件其有两种写法 绑定冒泡事件（不会帮我们阻止冒泡）【主要】 语法：bind事件类型="方法名" 方法名不能加括号，而且不能传参 绑定非冒泡事件（会帮我们阻止冒泡） 语法：catch事件类型="方法名" 方法名不能加括号，而且不能传参 2、事件对象 在小程序中，事件对象是给事件处理程序传递参数的唯一方式。 标签上使用data-数据名=“数据值”的形式传递 <!-- 传递参数100 -
微信小程序中关于bindtap的问题（传递参数）
哦哦一人
03-29 4995
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 //如果
微信小程序点击事件（bindtap）传递参数
热门推荐
Ghjkku的博客
02-05 1万+
{{item.index}}>点击事件传参利用自定义属性完成事件的参数传递。data-index。
微信小程序点击事件（bindtap）传递参数的方法
人与人之间最小的差别是智商，最大的差别是坚持。
03-18 9527
小程序在组件上绑定事件后，传递参数的方式不同于前端开发其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下： wxml: <view bindtap="goTo" data-index={{item.index}}>点击事件传参</view> js中： goTo: function(e){ // 传递的参数 const index= e.currentTarget.dataset['index']; } 利用自定义属性完...
微信小程序点击事件bindtap传参
Guoye的专栏
10-11 2892
微信小程序bindtap点击事件如何传参。
" bind:tap="toDetail" data-id="{{item.id}}" data-index="{{index}}"
06-20
用户想知道如何在`bind:tap`事件中传递`data-id`和`data-index`。根据微信小程序的文档，我们可以通过自定义属性（以`data-`开头）来传递数据，然后在事件处理函数中通过`event.currentTarget.dataset`来获取。示例...
<!-- 新增错误提示样式 --> <van-popup show="{{ show }}" position="bottom" custom-class="custom-form-modal" close-on-click-overlay="{{ false }}" bind:close="closeModal"> <!-- 新增加载状态 --> <van-overlay show="{{ loading }}" /> <van-loading wx:if="{{ loading }}" custom-class="loading-overlay" size="24px" vertical>加载中...</van-loading> <view class="modal-header"> <view class="title">{{ title }}</view> <van-icon name="close" size="20px" bind:tap="closeModal" /> </view> <scroll-view scroll-y class="form-content"> <block wx:if="{{!loading && config.length}}"> <block wx:for="{{ config }}" wx:key="index"> <view class="form-row"> <view class="row-title">{{ item.title }}</view> <view class="row-content"> <block wx:for="{{ item.items }}" wx:key="field"> <!-- 新增错误提示 --> <view wx:if="{{ errors[subItem.field] }}" class="error-message"> {{ errors[subItem.field] }} </view> <!-- 输入框 --> <block wx:if="{{ subItem.type === 'input' }}"> <van-field value="{{ formData[subItem.field] }}" placeholder="{{ subItem.placeholder || '请输入' }}" data-field="{{ subItem.field }}" bind:change="handleInput" border="{{ false }}" /> </block> <!-- 时间选择器 --> <block wx:elif="{{ subItem.type === 'time' }}"> <view class="time-picker {{ errors[subItem.field] ? 'error' : '' }}" bindtap="openTimePicker" data-field="{{ subItem.field }}"> {{ formData[subItem.field] || subItem.placeholder || '选择时间' }} </view> <van-popup show="{{ tempData[subItem.field + '_show'] }}" position="bottom" data-field="{{ subItem.field }}" bind:close="closeTimePicker"> <van-datetime-picker type="time" value="{{ formData[subItem.field] }}" data-field="{{ subItem.field }}" bind:confirm="handleTimeChange" bind:cancel="closeTimePicker" /> </van-popup> </block> <!-- 下拉选择器 --> <block wx:elif="{{ subItem.type === 'select' }}"> <view class="select-picker {{ errors[subItem.field] ? 'error' : '' }}" bindtap="openSelectPicker" data-field="{{ subItem.field }}"> {{ getSelectLabel(subItem.options, formData[subItem.field]) || subItem.placeholder || '请选择' }} </view> <van-popup show="{{ tempData[subItem.field + '_show'] }}" position="bottom" data-field="{{ subItem.field }}" bind:close="closeSelectPicker"> <van-picker show-toolbar columns="{{ subItem.options }}" value-key="label" data-field="{{ subItem.field }}" bind:confirm="handleSelectChange" bind:cancel="closeSelectPicker" /> </van-popup> </block> <!-- 按钮 --> <block wx:elif="{{ subItem.type === 'button' }}"> <van-button type="primary" size="small" data-field="{{ subItem.field }}" bind:tap="handleButtonClick"> {{ subItem.text }} </van-button> </block> <!-- 自定义组件 --> <block wx:elif="{{ subItem.type === 'custom' }}"> <custom-component value="{{ formData[subItem.field] }}" config="{{ subItem.config }}" data-field="{{ subItem.field }}" bind:event="handleCustomEvent" /> </block> </block> </view> </view> </block> </block> </scroll-view> <view class="modal-footer"> <van-button type="default" size="large" bind:tap="closeModal">取消</van-button> <van-button type="primary" size="large" bind:tap="submitForm">提交</van-button> </view> </van-popup> 第二个for循环数据错误
最新发布
08-02
<van-icon name="close" size="20px" bind:tap="closeModal" /> <scroll-view scroll-y class="form-content"> <!-- 外层循环: 配置组 --> <block wx:for="{{ config }}" wx:key="index" wx:for-item="group...
<view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bind:tap="changeItem" data-item="0">音乐推荐</view> <view class="tab-item {{tab==1?'active':''}}" bind:tap="changeItem" data-item="1">播放器</view> <view class="tab-item {{tab==2?'active':''}}" bind:tap="changeItem" data-item="2">播放列表</view> </view> <!-- 内容区域 --> <view class="content"> <swiper current="{{item}}" bindchange="changeTab"> <swiper-item> <include src="info.wxml"></include> </swiper-item> </swiper> <swiper> <swiper-item> <include src="play.wxml"></include> </swiper-item> </swiper> <swiper> <swiper-item> <include src="playlist.wxml"></include> </swiper-item> </swiper> </view> <view class="player">播放器</view>
03-14
在微信小程序开发中，`swiper` 和 `tabs` 的组合是一种常见的设计模式，用于实现标签页切换以及内容区域的同步更新。以下是基于所提供的引用内容和专业知识的一个完整解决方案。 #### HTML 结构 (WXML) 通过定义 `...
<view class="cu-form-group" bind:tap="chooseTeacher"> <view class="title"><text class="text-red">*</text>上课老师</view> <text wx:if="{{classes.teacherName||teacher.name}}">{{classes.teacherName||teacher.name}}</text> <text wx:else>请选择上课老师</text> </view代码解读
06-20
我们分析用户的问题：用户要求解释小程序代码中bind:tap事件绑定chooseTeacher方法的逻辑以及数据渲染的实现方式。根据用户提供的代码片段，我们有两个主要部分：WXML部分和JS部分。1.WXML部分：<viewclass="cu-form...
``` <!-- 自定义数据 --> <view bind:tap="nameAndage" data-name="微信小程序" data-age="10">点击之后可以获取姓名和年龄</view> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view>```<!-- 需求：模拟计算器上的按键，点击1-3，可以打印对应的内容 -->
03-20
其中`bind:tap="nameAndage"`表示当用户点击该区域时会触发名为`nameAndage`的事件处理函数，并将自定义的数据属性如`data-name`、`data-age`传递给这个函数。 对于需求“模拟计算器上的按键，点击1-3，可以打印...
微信小程序_bindtap传参
G20220610的博客
11-09 700
但是控制台输出一直是undefined类型，后面console.log（e），才发现里面的变量名是pageindex.....应该是会自动转成全小写字母，是HTML和DOM标准要求。时，实际上在JavaScript的事件处理函数中，这个属性会被转换为全小写，即。，即使在WXML中你定义它们时使用了驼峰命名法（camelCase）。，而微信小程序的WXML是基于HTML的一个扩展。因此，你需要在事件处理函数中使用。所以，当你在WXML中使用。在微信小程序中，当你使用。这就是为什么你在控制台中看到的是。
小程序bindtap传参
weixin_51526447的博客
02-06 467
【代码】小程序bindtap传参。
sql 里面的where和on的区别及where里面的like，
实用ai技巧
02-29 791
关于where 和 on 的区别 其实在用join里面有不同 这几天刷了牛客网里面的sql题，里面大部分是sqlite题，我觉得sqlite和mysql区别不大 关于where 和 on 一开始我也分不太清有什么区别，后来看了一些大佬的才明白一点 过程就不写了，总结写一下结论 1.首先on是用在连接join中的，它的意思是在生成连接结果的时候 偏心地 剔除掉一些不符合条件的， 至于怎么偏心，比如...
微信小程序 bindtap绑定如何传参
不想写代码的程序猿
09-26 3115
在写微信小程序代码的时候，对于前端一个组件需要进行前端向后端绑定，我们可以使用bindtap，如下面的例子： <view bindtap="upload_image">点击上传图片</view> 这里我们使用bindtap进行绑定，填写一个函数叫做upload_image。然后，我们就可以在.js文件中对upload_image函数编写。 那么，我们要如何对upload_image进行参数传递呢？ 像upload_image(params)这样吗？ 很可惜，微信小程序开发.
【微信小程序入门到精通】— 事件处理中进行数据赋值以及传递参数
热爱生活，积极向上的阿酱！
10-17 3749
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！这篇文章我将为大家讲解在微信小程序中我们如何在事件处理中进行数据的赋值更改以及如何进行参数的传递。本篇文章从两种事件类型进行讲述（tap 和 input 事件）如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！大家每天都要开开心心的喔，让我们一起快乐的学习吧！
【小程序】关于bindtap传值
Maximus_ckp的博客
02-06 5295
啦啦啦，端正态度，开始写技术博客哼哼~ 刚开始练手，准备模仿朝夕日历的番茄闹钟进行语法以及布局练习：从最简单的需求开始：点击分类，下面多一条红色border表示选中。在Page中定义一个值tagsSelect，作为选项的参数：Page({ ... data: { tagsSelect:0 }, ... })定义一个方法，来接收选项值的改变，从而改变样式： 但如果你这么写，<vie
#笔记#微信小程序的bindtap如何传参
m0_46526358的博客
02-23 1万+
今天在做一个微信小程序demo的时候发现bindtap并不能直接在函数上进行传参，一开始并不知道怎么解决，因此记录一下以免以后忘记 因为项目的需要，我需要将一个数组中的某个值传给另外一个列表，以方便在其他地方使用，但是按照定向思维进行传参发现会报错 <view bindtap="clickme({{item.word}})">{{item.word}}</view> 当点击abandon1时，并不能实现传递该值的效果 提示信息为： does not have a method
微信小程序 事件
qq_35248327的博客
03-18 1482
微信小程序 事件
微信小程序-2
因为热爱，所以坚持。
03-04 2198
循环渲染、屏幕适配、样式导入、window配置、tabBar配置、页面配置、网络数据请求
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值