微信小程序 bindtap 传参的实例代码


Posted in Javascript onFebruary 21, 2020

微信小程序 bindtap 传参 ,代码如下所示:

//index.wxml
<view bindtap="changeIndex" data-src="我固定参数">
</view>
//index.js
page({
 data:{
 },
 changeIndex(e){
 console.log(e.currentTarget.dataset.src); //我是固定参数
 }
});

可以看出 参数是通过给标签设置 data-参数名=“参数值” 自定义属性的方式 来传递的 例如想传递两个参数

//index.wxml
<view bindtap="changeIndex" data-src1="我固定参数1" data-src2="我是固定参数2" >
 
</view>
//index.js
page({
 data:{
 
 },
 changeIndex(e){
 console.log(e.currentTarget.dataset.src1); //我是固定参数1
 console.log(e.currentTarget.dataset.src2); //我是固定参数2
 }
});

如果需要传递动态的参数 例如遍历渲染时 想传递 index 给 changeIndex方法

//index.wxml
<view wx:for="{{lists}}" wx:for-index="index" wx:key="index" data-index="{{index}}" >
{{item.title}}
</view>
//index.js
page({
 data:{
 lists:[{title:'参数1',id:1},{title:'参数2',id:2}]
 },
 changeIndex(e){
 console.log(e.currentTarget.dataset.index);
 }
})

知识点补充:

微信小程序:bindtap方法传参

1、wxml

<view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee="{{orderList.act_fee}}" data-mobile="{{orderList.p_phone}}" data-act="{{orderList.act_name}}" class="operating f_r webkit-box" style="line-height:30px;"> 
   <a href="" class=" rel="external nofollow" pay bg_red">继续支付</a> 
  </view>

2、js

// 再次发起支付请求,调用后台PHP
 pay_again:function(e){
 var that = this;
 that.setData({
  jid: e.currentTarget.dataset.name,
  act_name: e.currentTarget.dataset.act,
  act_fee: e.currentTarget.dataset.fee,
  mobile: e.currentTarget.dataset.mobile
 })
 console.log('活动订单id = ' + that.data.mobile);
 }

总结

到此这篇关于微信小程序 bindtap 传参的实例代码的文章就介绍到这了,更多相关微信小程序 bindtap 传参内容请搜素三水点靠木以前的文章或下面相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
python负载均衡的简单实现方法
2018/02/04 Python
python MySQLdb使用教程详解
2018/03/20 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
《匆匆》教学反思
2014/02/22 职场文书
文化建设工作方案
2014/05/12 职场文书
保安公司服务承诺书
2014/05/28 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
圣诞节开幕词
2015/01/29 职场文书
导游词幽默开场白
2019/06/26 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python