在微信小程序中,要想获取元素的属性值,需要用到 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.moneyNum
console.log(moneyNum)
this.setData({
moneyNum: moneyNum
});
} })

微信小程序的bindtap事件的更多相关文章

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

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

  2. 微信小程序开发 [03] 事件、数据绑定和传递

    1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...

  3. 微信小程序中的事件绑定

    前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...

  4. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

  5. 微信小程序组件——bindtap和catchtap的区别

    了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...

  6. 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览

    本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...

  7. 微信小程序CheckBox选中事件

    1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...

  8. 微信小程序:bindtap等事件传参

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

  9. 微信小程序——获取绑定事件元素的ID

    小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...

随机推荐

  1. Linux Bash文本操作之sed篇其一

    作为Linux系统中文本处理的强力工具之一,sed功能强大,用法多变,值得我们好好学习. sed是用于过滤和转换文本的流编辑器. 一般情况下sed把当前处理的行存储在临时缓冲区,按指定命令处理之后将缓 ...

  2. vue app项目 第一天 基本架构和路由配置

    一.前言 今天开始打算花6天时间 完成一个基于vue的买菜app 在这里记录一下项目的流程和第一次做这个项目遇到的坑 以及解决的办法 二.第一步 脚手架的安装 使用npm 安装好脚手架  安装脚手架教 ...

  3. CURL命令学习一

    每天学习一点点.... 直接获取页面数据: curl http://www.xxx.com/[可以指定具体的路径获取某个文件] 用户名(密码): curl -u username http://www ...

  4. Dubbo学习系列之十四(Seata分布式事务方案AT模式)

    一直说写有关最新技术的文章,但前面似乎都有点偏了,只能说算主流技术,今天这个主题,我觉得应该名副其实.分布式微服务的深水区并不是单个微服务的设计,而是服务间的数据一致性问题!解决了这个问题,才算是把分 ...

  5. iOS 中使用 webSocket

    iOS 中使用 webSocket 是服务器和app之间的一种通信方式 webSocket 实现了服务端推机制(主动向客户端发送消息).新的 web 浏览器全都支持 WebSocket,这使得它的使用 ...

  6. 大疆无人机 Android 开发总结——视频解码

    DJI_Mobile_SDK是大疆为开发者提供的开发无人机应用的开发接口,可以实现对无人机飞行的控制,也可以利用无人机相机完成一些视觉任务.目前网上的开发教程主要集中于DJI 开发者社区,网上的资源非 ...

  7. urllib模块使用笔记

    文中所有python代码均使用的是python2.7实现,与python3并不兼容. UrlLib模块 urllib模块是适用于一个简单的网络数据获取和处理(不能处理有关验证和cookie等功能),官 ...

  8. December 07th, Week 49th Saturday, 2019

    Snowflakes are pretty patterns etched in water's dreams. 雪花,是水在梦中镌刻的美丽图案. From Anthony T.Hincks. Tod ...

  9. 数组中重复的数字(剑指offer_3)

    在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的,也不知道每个数字重复几次.请找出数组中任意一个重复的数字. Input: {2,3,1,0 ...

  10. eclipse_neon 的Spket 目录下只有一个Task Tags,没有其他的选项,导致没有办法添加提示文件! 添加sdk文件之后还是没有办法显示的解决办法

    问题解决办法: 将 spket-1.6.23的安装包里面的features  plugins 单独复制到D:\eclipse_neon\dropins 目录下,重启一下eclipse即可正常显示! 添 ...