100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序的bindtap事件

微信小程序的bindtap事件

时间:2022-01-09 17:52:31

相关推荐

微信小程序的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.jsPage({/*** 页面的初始数据*/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 });}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。