微信小程序 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 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
Terran兵种介绍
2020/03/14 星际争霸
php.ini中文版
2006/10/09 PHP
几种显示数据的方法的比较
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php 获取全局变量的代码
2011/04/21 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
JS iFrame加载慢怎么解决
2016/05/13 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
react路由配置方式详解
2017/08/07 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python写入CSV文件的方法
2015/07/08 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python生成器generator原理及用法解析
2020/07/20 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
大堂副理的岗位职责范文
2014/02/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL