评论页

技术点

自定义输入框 contenteditable 操作光标位置 resize事件监听

目录结构

└─ comoppnents
   └─ comment-page
      ├─ index                    # 评论半屏页面
      └─ components               # 评论组件
         ├─ comment-bar           # 评论底部 bar
         ├─ comment-editor        # 评论输入框
         ├─ comment-item          # 评论单条内容
         └─ comment-tool          # 评论举报/删除等操作

功能介绍

因为多种资源存在评论功能，如文章、影评、视频等，所以将该页面单独抽离出来作为一个公共页面。 注意，该评论页面为弹窗子页面，以实现用户返回操作时，只关闭评论的弹窗。

主要代码

<textarea 
  fixed 
  auto-height 
  disable-default-padding 
  show-confirm-bar="{{ false }}" 
  value="{{ content }}"
  bindinput="inputChange" 
  adjust-position="{{false}}" 
  class="comment-edit" 
  placeholder="爱笑的人运气不会太差~"
  placeholder-class="placeholder" 
  focus 
  confirm-hold 
  confirm-type="send" 
  hold-keyboard 
/>

data: {
  submitLoading: false,
  keyboradHeight: 0,
  hasChanged: false
},

ready() {
  // 键盘高度变化事件
  wx.onKeyboardHeightChange(({ height }) => {
    this.setData({
      keyboradHeight: height
    })

    // 由于当前页面的键盘首次抬起时，会触发一次0高度
    // 所以做一个开关控制一下是否为首次进入
    if (this.data.hasChanged && height === 0) {
      this.back();
    }

    if (height > 0) {
      this.data.hasChanged = true;
    }
  })
}