微信小程序 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 相关文章推荐
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
浅析vue数据绑定
Jan 17 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
iview实现图片上传功能
Jun 29 Javascript
vue实现井字棋游戏
Sep 29 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
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python执行外部程序的常用方法小结
2015/03/21 Python
讲解Python中的递归函数
2015/04/27 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python使用爬虫猜密码
2016/02/19 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
使用Python pip怎么升级pip
2020/08/11 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
质检的岗位职责
2013/11/17 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
书香校园建设方案
2014/05/02 职场文书
2014年信用社工作总结
2014/11/25 职场文书
农贸批发市场管理制度
2015/08/07 职场文书