zoukankan      html  css  js  c++  java
  • 微信小程序的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+).(dd).*$/, '$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 }); } })
  • 相关阅读:
    帧同步与状态同步的区别
    spread语法解析与使用
    CoordinatorLayout自定义Bahavior特效及其源码分析
    更便捷的Android多渠道打包方式
    用Dart&Henson玩转Activity跳转
    用RxJava处理复杂表单验证问题
    用RxJava处理嵌套请求
    技术与业务的抉择————论程序员的“瓶颈”问题
    Android Studio单元测试入门
    Android一键多渠道分发打包实战和解析
  • 原文地址:https://www.cnblogs.com/zmdComeOn/p/11920391.html
Copyright © 2011-2022 走看看