微信小程序的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 ...
随机推荐
- Linux下快速手动产生core文件
原文链接:https://blog.csdn.net/jctian000/article/details/79695006 当我们配置好自动生成core文件的环境后,若不想写导致崩溃的程序验证,那要怎 ...
- ANSIBLE安装和常用模块模块使用详细教程
目录 ANSIBLE安装和各种模块应用功能 安装配置ANSIBLE ANSIBLE使用 ansible-galaxy工具 ansible-pull工具 ansible-playbook ansible ...
- CodeForces - 5C(思维+括号匹配)
题意 https://vjudge.net/problem/CodeForces-5C 给出一个括号序列,求出最长合法子串和它的数量. 合法的定义:这个序列中左右括号匹配. 思路 这个题和普通的括号匹 ...
- IPFS学习-DNS链接
DNSLink 什么是DNS链接 DNS链接使用DNS TXT记录映射域名(如ipfs.io)到一个IPFS地址.因为你可以编辑自己的DNS记录,可以使他们总是指向最新版本的IPFS中的对象(如果修改 ...
- sap-abap 权限控制
FORM AUTH_CHECK . "工厂 LOOP AT S_WERKS. AUTHORITY-CHECK OBJECT 'M_BANF_WRK' ID 'WERKS' FIELD S_W ...
- 微信小程序模板(template)和组件的区别
template模块主要是展示,方法需要在使用template的页面中定义,对于通用的数据,最先想到或者理应是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. ...
- 由“RangeError: Invalid status code: 0”错误所引发的思考
最近发现一个基于Node.js平台上的Express框架运行的Web网站经常报这样一个错误: RangeError: Invalid status code: 网站的源码中有专门针对错误处理的中间件, ...
- MySQL 字符串分隔成行&子串统计
利用help_topic表把字符串转换成行(分隔符号',') ),) as `id` FROM mysql.`help_topic`; 统计字符串每个子串出现次数(分隔符号',') ),) AS `s ...
- robotframework框架 - 在Pycharm当中编写RobotFramework测试用例
众所周知,pycharm是个写python极好用的编辑器.也可以装很多的插件来完成各种骚操作. 某一天,心血来潮在pycharm的插件库里,搜索了一下robot,恩,发现有支持robotframewo ...
- [洛谷P1279][题解]字串距离
题目戳我 很明显的这题是一道dp,主要讲一下几个细节 1.初始化 我们需要初始化边界情况也就是一个字符串为空的情况 #----------# #----------# A:aaaaaa A:□□□□□ ...