自制弹出输入框，输入文字，点击完成事件。

最新推荐文章于 2023-02-09 14:46:29 发布

原创最新推荐文章于 2023-02-09 14:46:29 发布 · 708 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在点击事件后弹出一个输入框，让用户输入文字，并提供了相应的WXML代码示例。点击确定或取消可以关闭输入框，文章还提到建议使用动画效果增强用户体验。

有时候点击某事件后，需要使用者输入原因等文字内容，这时就需要一个弹出框输入文字。是这样的效果：
在这里插入图片描述
wxml:

<view class="reasonBackground" hidden="{{hidden}}">
 <view class="reasonFrame">
  <view class="word">请输入原因:</view>
  <form bindsubmit="formSubmit" bindreset="cancel" >  
    <view class="resonFrame">
      <textarea name="notGroupGoReason" maxlength="60"/>
      <view class="confirmFrame">        
        <button formType="reset">取 消</button>
        <button form-type="submit">确 定</button>
      </view>
    </view>
  </form>
 </view>
</view>

{{hidden}}的初始值为true

Page({
  data: {
    hidden: true
  },
onLoad: function (options) {
   var that = this
    var hidden = that.data.hidden
 that.setData({     
      hidden
    })
    }
    })

点击notGroupGo按键后弹出框

  notGroupGo: function () {
    var that = this
    that.setData({
      hidden: false
    })
  },

点击确定后离开页面或隐藏弹出框架

  formSubmit: function(e){    
    var notGroupGoReason = e.detail.value.notGroupGoReason
    console.log("notGroupGoReason:",notGroupGoReason)
    var goodsid = app.globalData.goodsInfo._id
    var db = wx.cloud.database()
    db.collection('goodsList').doc(goodsid).update({
        data: {
          state: 3,
          notGroupGoReason,
        }
      })
      .then(res => {
        wx.showToast({
          title: '完成',
          icon: 'success',
          duration: 2000
        })
        setTimeout(function () {
          wx.hideToast()
          wx.navigateBack({
            delta: 1,
          })    
        }, 1500)          
      })
      .catch(console.error)
  }

还有取消：

cancel:function(){
    var that = this
    that.setData({
      hidden: true
    })
  },

注意隐藏和显示的使用，最好使用动画效果，但是我不会，如果你会可否告诉我，多谢！