小程序如何通过绑定事件传参和触发事件如何获取参数，注意data-name中的name里面有大写或者烤串命名方式会被转换为小写

最新推荐文章于 2024-08-13 16:01:51 发布
最新推荐文章于 2024-08-13 16:01:51 发布
阅读量1k 收藏
点赞数
分类专栏： js 与框架类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oXiangZuoZuo12345/article/details/82696085
版权

浪漫的程序猿
关注
专栏目录
同学留步，我想跟你聊聊成长中的苦难
互联网老辛
06-04 3009
知乎上有小伙伴提问： 找工作快一个月了，快疯了，没有收入还要交房租， 有没有什么工作，虽然我学历低但是我可以学? 看到这里，我不禁泪目。很多人似乎不知道，“我不会但我可以学" 是这个世界上最大的谎言。 如果你可以学，你就不会学历低； 如果你可以学，你就不至于没工作； 【1】 如果可以穿越，我想再回到那个还没有毕业，只身一人在烟台的日子，站在上帝的视角看看自己的过往。 那一年的暑假，我打算去烟台走一走，只身一人，带了一个钱包，就出发了。 火车缓缓的开进烟台，我张开双手，做了个拥抱的姿势，大喊一声，烟台我来
8、微信小程序：创建、基础内容
weixin_47886206的博客
11-14 234
微信小程序：创建、基础内容
小程序事件传参
janyxh的博客
09-23 410
想要从wxml中传一个参数过去到js文件，要怎么传参？ 假设有一个tabs标签页的需求，当点击某一个标签页时，绑定事件bindtap，将当时点击的标签页索引值传过去，发现直接bindtap="change(index)"行不通，无法获取到值。 经查阅，小程序是通过在元素上绑定data-的方法传参数的。 例: <block wx:for="{{tabs}}" wx:key="key"> <view class="{{ index === activeIndex ? 'community
小程序学习day05-事件绑定、事件传参（小程序中不能在绑定事件的）、实现文本框和data数据的动态绑定、条件渲染、wx：for
最新发布
2301_76648183的博客
08-13 736
Wx:elif和wx:else来添加else进行判断。
小程序绑定事件传参
Var_YanGuangYing
04-17 672
小程序在组件上绑定事件后，传递参数的方式不同于前端开发其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下： wxml: <view bindtap="bindHandle" data-index="1">点击事件传参</view> wxjs: bindHandle: function(e){ // 传递的参数 ...
小程序开发-事件绑定-事件传参-条件渲染-列表渲染
qq_45811054的博客
03-23 358
小程序开发-事件绑定-事件传参-条件渲染-列表渲染
微信小程序 事件 绑定 传参问题
qq_41452433的博客
08-04 561
微信小程序开发时 发现  &lt;view&gt;组件绑定事件后， 里面嵌套 的 &lt;view&gt;组件 在绑定事件时不能传参，解决 对用需要传参的绑定事件，我一般不会让他的上级容器 &lt;view&gt;进行绑定事件传参操作， 另一种方法，非不得已，子级直接放弃&lt;view&gt;容器组件，改用&lt;text&gt;&lt;/text&gt;进行事件绑定传参。  ...
小程序点击事件传参
qq_30351747的博客
02-03 1184
微信小程序可以通过直接写 data-index=“1” 进行数据的绑定 ，利用 bindtap 点击事件执行函数从而获取到参数信息。
对计算机专业来说学历真的重要吗？
热门推荐
启舰
09-27 55万+
我本科学校是渣渣二本，研究生学校是985，现在毕业五年，校招笔试、面试，社招面试参加了两年了，就我个人的经历来说下这个问题。 这篇文章很长，但绝对是精华，相信我，读完以后，你会知道学历不好的解决方案，记得帮我点赞哦。 先说结论，无论赞不赞同，它本质就是这样：对于技术类工作而言，学历五年以内非常重要，但有办法弥补。五年以后，不重要。 目录： 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
2023-2028年烤串店市场现状与前景调研报告.pdf
01-20
报告标题：“2023-2028年烤串店市场现状与前景调研报告”主要探讨了烤串店行业的当前状况、竞争态势以及未来的发展趋势。这份深度行业研究报告为烤串店的企业经营者和投资者提供了宝贵的决策依据。 在第一章中，...
烤串宣传单模板设计
08-06
比如，可以突出烤串的制作工艺、新鲜食材来源，或者特别的调料配方，让顾客对烤串有更深的认识和期待。 "传单设计"和"宣传单模板"则涉及到具体的设计技巧和流程。一个有效的模板应包含以下元素：品牌标识（如LOGO）...
程序编程时对变量命名的一些方法的整理
06-13
程序编程时对变量命名的一些方法的整理，驼峰法、蛇形法、烤串法等等，方法没优劣，最重要的是程序的风格要统一，统一，统一。
微信小程序实现传递多个参数与事件处理
12-10
前言 开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？ 一、事件 什么是事件 事件是视图层到逻辑层的通讯方式 事件可以将用户的行为反馈到逻辑层进行处理 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数 事件对象可以携带额外信息，如id, dataset, touches 事件处理的使用 通过在wxml中设置bindtap、catchtap等，在js中写对应的实现方法（不过这种方式目前有个缺点，点击的时候没有点击效果），使用方法如下 以下摘自微信小程序官方教程，在
weChat小程序--点击事件复制data绑定参数
houzhyan-博客
05-19 1072
index.wxml &lt;view class="card_text sub" bindtap="onCallPhoneTap" data-name="12345678911"&gt;手机：12345678911&lt;/view&gt; &lt;view class="card_text" catchtap='onCopyTap' data-name="1234567
小程序的事件处理参数不能取得
weixin_34192993的博客
10-28 322
onLoad: function (option) {   当等待关键参数时，希望能够用settimeout重新调用，但用arguments无法获取option参数：   onload [callee: (...), Symbol(Symbol.iterator): ƒ]
原生微信小程序事件传参 - bindtap + data-*（包含多参数传参）- 附完整示例
m0_48968874的博客
05-26 1443
原生微信小程序事件传参 - bindtap + data-*（包含多参数传参）
【微信小程序】事件传参的两种方式
云泽野の编程日记
06-10 1931
事件传参:在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发.小程序进行事件传参的时候，除了使用data-*属性传递参数外，还可以 使用 mark 标记传递参数mark 是一种自定义属性，可以在组件上添加，用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据然后通过事件对象进行获取自定义数据,在组件上使用mark:自定义属性。
微信小程序 data命名不能大写
一只萌萌的萌新的博客
08-07 304
data-一切=“{{值}}” 这个“一切"，不能包含大写 <button class='cu-btn round sm bg-blue' catchtap='addShopCart' data-id="{{item.id}}" data-title="{{item.waresName}}"data-saleprice="{{item.salePrice}}" data-image="{{i...
微信小程序中的data-属性使用——绑定列表点击项属性（带代码示例）
m0_59704905的博客
05-05 736
data-id="{{item.id}}"` 这个表达式的作用是将数据项 `item` 中的 `id` 属性值绑定到当前组件的 `data-id` 属性上。（非常方便传递列表中点击项的特定数据——如绑定商品列表项的id属性）在给定的代码片段中，`data-id` 是一个自定义属性（在微信小程序开发中常见），它用于存储并传递数据到对应的事件处理函数中。简而言之，`data-id` 是一个用于临时存储和传递数据的属性，方便在不同组件间或同一组件内进行数据交互。在小程序中，可以通过。
将CSS和JS写入html中
05-28
您可以将CSS和JS代码直接写入HTML文件的头部和尾部的`<style>`和`<script>`标记内。以下是一个示例： ``` <!DOCTYPE html> <html> <head> <title>轮盘选择器</title> <style> #roulette { width: 200px; height: 200px; border-radius: 50%; background-color: #eee; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; } .option { width: 80px; height: 80px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; font-size: 14px; font-weight: bold; text-align: center; } .option:nth-child(odd) { transform: rotate(36deg) translate(100px) rotate(-36deg); } .option:nth-child(even) { transform: rotate(72deg) translate(100px) rotate(-72deg); } .option:nth-child(1) { transform: rotate(0deg) translate(100px) rotate(0deg); } button { margin-top: 20px; font-size: 16px; padding: 10px 20px; } .selected { background-color: #f00; color: #fff; } </style> </head> <body> <div id="roulette"> <div class="option">汉堡</div> <div class="option">披萨</div> <div class="option">牛肉面</div> <div class="option">炸鸡</div> <div class="option">麻辣烫</div> <div class="option">寿司</div> <div class="option">烤肉</div> <div class="option">火锅</div> <div class="option">烤鱼</div> <div class="option">烤串</div> </div> <button onclick="spin()">开始选择</button> <script> function spin() { var options = document.querySelectorAll('.option'); var selected = Math.floor(Math.random() * options.length); options[selected].classList.add('selected'); } </script> </body> </html> ``` 在这个示例中，CSS代码被包含在`<style>`标记内，JavaScript代码被包含在`<script>`标记内。这样做可以使HTML文件更加简洁，但如果CSS和JS代码比较复杂和庞大，建议将它们分别写入独立的文件中，然后使用`<link>`和`<script>`标记将它们引用到HTML文件中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值