微信小程序同时监听多个input，改变按钮状态

平井缘

已于 2023-08-11 16:13:40 修改

阅读量986

点赞数 1

文章标签：微信小程序 javascript 前端

于 2023-03-14 11:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_45693257/article/details/129521508

版权

该文章展示了一个微信小程序中实现用户反馈的功能，包括数据为空和不为空的状态显示，使用了van组件库来创建单选框组、文本区域和上传文件组件。用户选择反馈类型，填写内容，上传截图或视频，提交按钮的状态根据是否填写完整动态变化。

摘要由CSDN通过智能技术生成

效果图：

数据为空时：

在这里插入图片描述

数据不为空时：

在这里插入图片描述

wxml：

 <view class="container">
    <text class="title">选择反馈类型</text>
    <view class="radio-container">
      <!-- 单选框 -->
      <van-radio-group value="{{ radio }}" direction="horizontal" bind:change="changeFeedback" data-model="radio">
        <van-radio wx:for="{{radioList}}" wx:key="value" class="radio-item" use-icon-slot value="{{ item.value }}" name="{{item.value}}">
          {{item.label}}
          <image class="icon-size" slot="icon" src="{{ radio === item.value ? icon.active : icon.normal }}" />
        </van-radio>
      </van-radio-group>
    </view>
  </view>
  <view class="container">
    <text class="title">填写反馈内容</text>
    <textarea class="textarea" value="{{textarea}}" name="" id="" cols="30" rows="10" placeholder="请详细描述你遇到的问题（500字内）" bindinput="changeFeedback" data-model="textarea"></textarea>
  </view>
  <view class="container">
    <text class="title">上传截图/视频</text>
    <van-uploader file-list="{{ fileList }}" max-count="9" catch:delete="deleteImg" bind:after-read="changeFeedback"  data-model="image"/>
  </view>

在这里插入图片描述按钮：

 <view class="submit-btn {{isSumbit ? 'submit-btn-no-empty' : ''}}" bindtap="bindSubmit">提交</view>

js：

  // 获取单选框、输入框、上传文件的值，并根据值改变提交按钮的状态
  changeFeedback(e: any) {
    let item = e.currentTarget.dataset.model
    
    // 因为我用了一些组件，导致获取值的参数不同，如果统一使用了input，只需以下代码即可,不需要做判断
    // this.setData({
    //    [item]: e.detail.value
    // })
    
    if (item == 'radio') {
      this.setData({
        [item]: e.detail
      })
    } else if (item == 'textarea') {
      this.setData({
        [item]: e.detail.value
      })
    } else {
      const { file } = e.detail
      const { fileList = [] } = this.data
      fileList.push({ ...file, url: file.url })
      this.setData({ fileList })
    }
    // 都不为空时，改变按钮状态
    if (this.data.radio !== 0 && this.data.textarea && this.data.fileList.length !== 0) {
      this.setData({
        isSumbit: true
      })
    }
    
    if (!this.data.textarea) {
      this.setData({
        isSumbit: false
      })
    }
  },