微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 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事件的更多相关文章
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 微信小程序:bindtap等事件传参
事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
随机推荐
- 浅析ketamahash和murmurhash
说来赶巧,之前我有16个redis集群,然后我要将某个key根据路由规则存到16个集群中的某一个上面,正巧用到了这两种哈希算法,改造完毕上线后,整体带来的效果也十分理想. 说道ketamahash,它 ...
- VS Code Remote,在服务器上开发程序,开启全新开发模式
一直使用Idea开发java 程序,头疼的是太太太占用内存了,笔记本电脑经常卡爆,在服务器开发的话又太麻烦,VS Code Remote的带来,解决了这一烦恼.下面来实战一下. VS Code Rem ...
- 简单“三步”让你的网站支持https!
关于Let's Encrypt Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust.EFF等组织人员发起 ...
- 使用vue脚手架快速创建vue项目(入门)
1.安装环境 为了方便,以下操作大多数中命令行中运行,window可以用cmd,powershell,gitbash等. 安装node.js 打开它的官网,或者中文网站,然后直接下载就可以了,然后跟安 ...
- 关于MFC与OpenGL结合绘图区域用鼠标来控制图形的移动的坑
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11773171.html 之前开发的导入多个模型,旋转,分别移动什么什么的,都是在纯OpenGL ...
- CODING 2.0 服务升级:一站式服务体系助力企业研发上云
近日,CODING 在 KubeCon 2019 上海站上正式推出了 DevOps 的一站式解决方案: CODING 2.0,除了进行 产品 及 产品理念 的升级,还对用户服务进行了整体升级,主要涵盖 ...
- 阿里云ECS服务器部署HADOOP集群(五):Pig 安装
本篇将在阿里云ECS服务器部署HADOOP集群(一):Hadoop完全分布式集群环境搭建的基础上搭建. 1 环境介绍 一台阿里云ECS服务器:master 操作系统:CentOS 7.3 Hadoop ...
- win10配置linux子系统使用python绘图并显示--WSL使用GUI输出
默认情况下,Win10的linux子系统(WSL)是只能使用命令行程序的.所有图形界面的程序都无法执行. 通过为Win10安装XWindows协议的终端应用,可以让Win10成为一台XWindow终端 ...
- 小程序之--动态设置页面标题 wx.setNavigationBarTitle
参考地址 http://www.yilingsj.com/xwzj/2018-11-26/weixin-navigationbartitletext.html 页面最初是[在线教研] 可以在这个页面的 ...
- HTML和css常见问题解答2
1.将一个块级元素水平和垂直居中有几种方法?分别是什么? 四种方式: (1).要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上 ...