在微信小程序中,要想获取元素的属性值,需要用到 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. asp.net core 系列 9 三种运行环境和IIS发布

    一.在asp.net core中使用多个环境 ASP.NET Core 配置是基于运行时环境, 使用环境变量.ASP.NET Core 在应用启动时读取环境变量ASPNETCORE_ENVIRONME ...

  2. Ubuntu : apt 命令

    apt 命令是一个功能强大的命令行工具,它不仅可以更新软件包列表索引.执行安装新软件包.升级现有软件包,还能够升级整个 Ubuntu 系统(apt 是 Debian 系操作系统的包管理工具).与更专业 ...

  3. DRF单表序列化和反序列化

    安装 djangorestframework pip install djangorestframework 将rest_framework注册到app上 INSTALLED_APPS = [ 're ...

  4. django找不到模板的错误处理django.template.exceptions.TemplateDoesNotExist: blog/list.html

    错误提示如下图: 程序出错对于程序员而言是最常见的,一般解决的要点是看清错误提示(读懂英文很重要) 根据错误提示 blog\list.html这个文件不存在,也就是没找到资源 这个时候需要去检查有没有 ...

  5. 设置Redis的LRU策略

    概念 LRU(Least Recently Used)最近最少使用算法是众多置换算法中的一种. maxmemory Redis中有一个maxmemory概念,主要是为了将使用的内存限定在一个固定的大小 ...

  6. mongodb主备配置

    前言:mongodb目前推荐的方式是副本集的方式实现,但是副本集需要三台服务器,目前配置为主备方式 假设你已经安装好了mongo,并配置好了响应的用户 下面修改mongodb.conf配置文件,开启认 ...

  7. Android8.1 MTK平台 SystemUI源码分析之 网络信号栏显示刷新

    SystemUI系列文章 Android8.1 MTK平台 SystemUI源码分析之 Notification流程 Android8.1 MTK平台 SystemUI源码分析之 电池时钟刷新 And ...

  8. COUNT(*)、COUNT(主键)、COUNT(1)

    MyISAM引擎,记录数是结构的一部分,已存cache在内存中; InnoDB引擎,需要重新计算,id是主键的话,会加快扫描速度: 所以select count(*)  MyISAM完胜! MyISA ...

  9. 使用C#面向对象实现简易计算器(简单工厂模式)

    操作流程: 1. 新建Operation类 2. 新建OperationAdd类,并继承Operation类 3. 新建OperationSub类,并继承Operation类 4. 新建Operati ...

  10. [Go] 解决golang.org模块无法下载的问题

    使用GOPROXY环境变量解决proxy.golang.org无法访问问题 在/etc/profile中增加 export GOPROXY=https://goproxy.cn windows下使用 ...