微信小程式實作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,
      })
    }
  },
})      

/* 金額 積分子產品 */
.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;
}