微信小程序实现input限制数值大小以及效果(超详细)

水深无声 2023-02-17 05:12 67阅读 0赞

我们都知道在有些需求中对用户的输入有一定的限制,如果不限制,那么不乏有些用户随意输入,接下来我们来看看怎么实现input数值限制,以及用户体验更好

先来看看效果,本次以积分输入框为主

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

默认积分合计为0,如果我们只是简单获取input的值,那么我们最后可能会有一些小bug,影响用户体验效果

这里我给大家介绍一些怎么解决这个问题

先看看我们的流程:

### 1: 当用户输入值小于或等于100时,以用户输入为主 ###

### 2: 当用户输入值大于100时,将值限制到最大化100, 返给用户一个限制提示toast ###

### 3: 当用户清空input框时,积分合计默认为0 ###

我们就以上3个流程来实现具体代码:

wxml

<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>
    
    
    
    <view class="pay-btn">
      <view class="pay-left">
        <view>
          <text>积分合计: </text>
          <text>{
       {integral}}</text>
        </view>
      <view class="pay-btn-right" bindtap="chooseSubmitSh">提交订单</view>
    </view>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612155155626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200612155749286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200612155749313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70