微信小程序實現input限制數值大小以及效果(超詳細)

我們都知道在有些需求中對用戶的輸入有一定的限制,如果不限制,那麼不乏有些用戶隨意輸入,接下來我們來看看怎麼實現input數值限制,以及用戶體驗更好

先來看看效果,本次以積分輸入框爲主

 

默認積分合計爲0,如果我們只是簡單獲取input的值,那麼我們最後可能會有一些小bug,影響用戶體驗效果

這裏我給大家介紹一些怎麼解決這個問題

先看看我們的流程:

1: 當用戶輸入值小於或等於100時,以用戶輸入爲主

2: 當用戶輸入值大於100時,將值限制到最大化100, 返給用戶一個限制提示toast

3: 當用戶清空input框時,積分合計默認爲0

 

我們就以上3個流程來實現具體代碼:

wxml

<!-- 金額   積分 S -->
<view class="use-module">
  <view class="use-integral">
    <view>
      <view>使用積分</view>
      <input type="number" value="{{moneyNum}}" placeholder="請輸入您要支付的積分" placeholder-class="color: #999999;" bindinput="getIntegral"></input>
    </view>
    <view>您的可用積分爲500, 本次最多可用100</view>
  </view>
</view>
<!-- 金額   積分 E -->

<!-- 支付按鈕 S -->
<view class="pay-btn">
  <view class="pay-left">
    <view>
      <text>積分合計: </text>
      <text>{{integral}}</text>
    </view>
  <view class="pay-btn-right" bindtap="chooseSubmitSh">提交訂單</view>
</view>
<!-- 支付按鈕 E -->

js

Page({

    data: {
        integral: 0,          // 積分默認
        moneyNum: null,           // 用戶輸入的積分
    },
    /**
       * 獲取輸入的積分
   */
  getIntegral: function(e) {
    var integral = e.detail.value;
    if(integral<=100) { // 判斷value值是否小於等於100, 如果大於100限制輸入100
      if(integral == '') { // 判斷value值是否等於空,爲空integral默認0,
        this.setData({
          integral: 0
        })
      } else {
        this.setData({
          integral: integral,
        })
      }
      
    } else {
      wx.showToast({
        title: '最多可用100積分, 請重新輸入',
        icon: 'none',
      })
      this.setData({
        integral: 100,
        moneyNum: 100,
      })
    }
  },
})

wxss

/* 金額 積分模塊 */
.use-module {
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 20rpx;
  font-size: 24rpx;
  color: #000000;
  padding: 45rpx 20rpx 30rpx;
}
.use-integral view:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.use-integral view:nth-child(1) input {
  height: 60rpx;
  width: 507rpx;
  background: #EEEEEE;
  padding: 0 20rpx;
}
.use-integral view:nth-child(2) {
  text-align: right;
  color: #999999;
  font-size: 20rpx;
  margin-top: 16rpx;
}
/* 支付按鈕 */
.pay-btn {
  width: 100%;
  height: 98rpx;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  z-index: 99;
}
.pay-left {
  font-weight: Medium;
  font-family: "PingFang-SC-Medium";
  margin-left: 20rpx;
  font-size: 20rpx;
}
.pay-left view:nth-child(1) {
  margin-bottom: 15rpx;
}
.pay-left view:nth-child(1) text:nth-child(2) {
  color: #F73A3F;
}
.pay-left view:nth-child(2) text:nth-child(2) {
  font-size: 18rpx;
  color: #F73A3F
}
.pay-left view:nth-child(2) text:nth-child(3) {
  color: #F73A3F;
}
.pay-btn-right {
  height: 72rpx;
  width: 240rpx;
  background: #F73A3F;
  line-height: 72rpx;
  text-align: center;
  margin-right: 20rpx;
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: Medium;
  font-family: "PingFang-SC-Medium";
  border-radius: 36rpx;
}

討論羣,有什麼問題可以在羣裏問我

QQ羣: 1102727334