微信小程序之弹窗输入框

微信小程序，点击按钮，弹出输入框，输入完成，隐藏输入框。

WXML关键代码

<image src="../../static/commit.png" catchtap="comment" id="{{item.worksId}}"></image>

<!-- 弹出输入框 -->
<modal hidden="{{hiddenmodalput}}" title="输入评论内容" confirm-text="提交" cancel-text="取消" bindcancel="cancelInput" bindconfirm="confirmInput">
  <input type='text' placeholder="......" bindinput="commentInput" auto-focus />
<!-- <textarea placeholder="请输入内容"></textarea> -->
</modal>

JS关键代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //初始化隐藏模态输入框
    hiddenmodalput: true,
    // 作品ID
    worksId: '',
    // 评论内容
    commentContent: '',
  },

  // 评论用户的作品
  comment: function (e) {
    // console.log(e)
    // 获取当前作品的ID
    var worksIdTemp = e.target.id
    this.setData({
      worksId: worksIdTemp
    })
    // console.log(this.data.worksId)

    this.setData({
      // 模态框的显示
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },

  // 获取模态框评论的内容
  commentInput: function (event) {
    this.setData({
      commentContent: event.detail.value
    })
    // console.log(event.detail.value)
  },

  // 模态框取消按钮事件
  cancelInput: function () {
    this.setData({
      // 模态框的隐藏
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },

  // 模态框确认按钮事件
  confirmInput: function () {
    if (this.data.commentContent.length == 0) {
      wx.showToast({
        title: '评论不为空！',
      })
      this.setData({
        // 模态框的隐藏
        hiddenmodalput: !this.data.hiddenmodalput
      })
    } else {
      wx.request({
        url: getApp().globalData.websiteUrl + '/works/' + this.data.worksId + '/comment',
        method: "POST",
        header: {
          'content-type': 'application/json'
        },
        data: {
          openId: getApp().globalData.openId,
          commentContent: this.data.commentContent
        },
        success: res => {
          if (res.data.code == 1) {
            this.setData({
              // 模态框的隐藏
              hiddenmodalput: !this.data.hiddenmodalput
            })
            // 局部刷新数据
            this.onShow()
          }
        }
      })
    }
  }
})

实现效果