微信小程序的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 }); } })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM