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

最新推荐文章于 2025-03-13 11:20:06 发布

青衫折扇

最新推荐文章于 2025-03-13 11:20:06 发布

阅读量1.2w

点赞数 4

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42543264/article/details/106717300

版权

小程序专栏收录该内容

91 篇文章

订阅专栏

我们都知道在有些需求中对用户的输入有一定的限制,如果不限制,那么不乏有些用户随意输入,接下来我们来看看怎么实现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 -->

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