在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求

如下是正确的方式data-money-Num="9.93":

 <view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元,</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view>

如果写成data-moneyNum="9.93”就获取不到了,所以要么全小写,要使用驼峰命名方式,就必须中间加 - (短横杠)

下面是完整的饿示例:

wxml:

<view class="page"><view class="weui-msg"><view class="weui-msg__icon-area"><!-- <icon type="success" size="64"></icon> --><image src="../../images/money.png"></image></view><view class="weui-msg__text-area"><view class="weui-msg__title weui-msg__titles">提现金额</view><view class="weui-msg__title weui-msg__titless">¥<input type="digit" value="{{moneyNum}}" style="display:inline-block" confirm-type="done" bindinput="bindedit"></input></view><view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元,</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view></view><view class="weui-msg__opr-area"><view class="weui-btn-area"><button class="weui-btn" type="primary" bindtap="paytousr">提现</button></view></view></view>
</view>

js:

// pages/wallet/withdraw.js
Page({/*** 页面的初始数据*/data: {moneyNum: null,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},bindedit: function (event){this.setData({moneyNum: this.money(event.detail.value)  //money匹配金额输入规则,返回输入值});},money(val) {let num = val.toString(); //先转换成字符串类型if (num.indexOf('.') == 0) { //第一位就是 .num = '0' + num}num = num.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数if (num.indexOf(".") < 0 && num != "") {num = parseFloat(num);}return num},/*** 提现*/paytousr: function (e) {if(this.data.moneyNum==null){wx.showToast({title: '请输入正确的金额',icon:'none'})setTimeout(function(){wx.hideToast()},2000)return false;}//此处还应该判断提现金额是否大于余额var tmp_my_id = wx.getStorageSync('my_id')var tmp_my_session = wx.getStorageSync('my_session')wx.request({url: '自己的接口',method: 'POST',dataType: 'json',header: {'content-type': 'application/json' // 默认值},data: {my_id: tmp_my_id,my_session: tmp_my_session,my_fee: this.data.moneyNum*100 // 用户输入的元比如,1.01元,,你这边转化成分},success: function (res) {var data = res.data;console.log(data); // errCode=0 是服务器端把数值保存到数据if(data.errCode==0){wx.showToast({title: '提现成功',icon: 'none',})setTimeout(function () {wx.hideToast()}, 2000)  }else{wx.showToast({title: '提现失败',icon: 'none',})setTimeout(function () {wx.hideToast()}, 2000)  }},fail: function (res) {console.log('login fail')},})},/**  * 全部提现  */allDraw:function(event){var moneyNum = event.currentTarget.dataset.moneyNumconsole.log(moneyNum)this.setData({moneyNum: moneyNum });}})

微信小程序的bindtap事件相关推荐

  1. 微信小程序之bindtap事件传参

    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件 ...

  2. 微信小程序之bindtap事件绑定传参

    wxml代码: <view class='fen'><text bindtap='prev' data-page="{{pageDang}}">上一页< ...

  3. 微信小程序中bindtap和catchtap

    bindtap和catchtap都作为微信小程序中的事件,同样是tap,那么bindtap和catchtap有什么区别呢? 首先我们要了解一下什么是冒泡事件和非冒泡事件: 微信小程序冒泡事件和非冒泡事 ...

  4. [微信小程序]微信小程序点击事件返回值的target分析

    微信小程序点击事件返回值的target分析 测试过程 在微信小程序中创建以下图片 然后在调试中点击下面第5个. console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的 ...

  5. 微信小程序长按事件触发点击事件的BUG处理

    微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <view class="contai ...

  6. 微信如何解绑小程序_微信小程序解绑事件,微信小程序解除绑定

    什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如id, ...

  7. 微信小程序的click事件会200~300ms的延迟如何解决

    移动端的click事件会造成200~300ms的延迟 微信小程序给的两种解决方案 第一种 fastclick 第二种 使用tap(触摸)来代替click事件 <button bindtap=&q ...

  8. 微信小程序服务器未响应,微信小程序点击事件失效

    想在主页上添加一个搜索功能 但是加上之后发现原有的页面点击事件没有反应了 个人怀疑是input和bindtap互相影响? 有人碰到类似的情况吗 是怎么解决的 {{item}} this is a te ...

  9. 微信小程序组件movable-area事件穿透,事件冒泡,movable-area遮盖/遮挡住其他元素之后点击事件不穿透/不冒泡解决办法

    先上解决办法: .movable-area{position:fixed;top:0;left:0;width:750rpx;height:100%;pointer-events: none; } . ...

最新文章

  1. 在GridView中如何格式化Money型字段?
  2. 网页简单配置捉取网购信息
  3. 五十五、深入插入排序和选择排序
  4. LiveWriter测试
  5. php流程控制的类型有哪些,流程控制包括哪些内容
  6. Windows下SVN回滚到旧版本(TortoiseSVN)
  7. 【GPU编程】The Cg Runtime:OpenGL中调用Cg程序
  8. 【算法】删去k个数字后的最小值
  9. DOS命令行使用pscp实现远程文件和文件夹传输(转)
  10. Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结
  11. 李炎恢PHP培训视频教程
  12. 语音识别技术:2018年主要参与者的完整指南
  13. 基于MC1496乘法器的AM信号调制
  14. Eclipse之各个版本的区别
  15. vue valley_12个无剧透的Stardew Valley秘诀和技巧,助您入门
  16. 雷顿学院与与河北各地高校签署战略合作伙伴关系
  17. 代码分析之numpy.array
  18. matlab rho是什么意思,rho(rho值是什么意思)
  19. QT入门基础认知(三个常用类、三种对话框类型、信号和槽)
  20. Java常见算法(五)【二叉树:morris遍历】

热门文章

  1. Excel VLOOKUP实用教程之 09 VLOOKUP 与多个条件一起使用?(教程含数据excel)
  2. 如何让自己的APP更吸引人
  3. 帮我写一个1000字的本科毕业致谢
  4. js 小数取整,js 小数向上取整,js小数向下取整
  5. js向下取整、向上取整、四舍五入、取绝对值
  6. mysql远程访问慢的解决小妙招
  7. 关于gdk_threads_add_idle函数的线程安全问题解释
  8. vue 中 input事件
  9. [Delphi]罗技无限灵貂,驱动程序扩展补丁-Logz V3.0 (所有四向滚轮鼠标、应用窗体对话框均能通用)
  10. postgresql锁表查询与处理