实现类似于今日头条的评论功能（仅样式）

如图，在默认情况下评论栏为一种样式

首先我们先写两个底部

<view class="bottom" v-if="hidden == true">
  <view class="top-review" @click="review">
    <view class="review">
      <image src="../../static/detais-05.png"></image>
      <text>写评论</text>
    </view>
  </view>
  <view class="bottom-img" @click="discuss">
    <image src="/static/image_04.png"></image>
    <text>评论</text>
  </view>
  <view class="bottom-img" @tap="zan">
    <image src="/static/image_04.png"></image>
    <text>点赞</text>
  </view>
  <view class="bottom-img" @tap="click">
    <image src="/static/image_03.png"></image>
    <text>分享</text>
  </view>
</view>

<view class="bot" v-else="hideen == false">
  <view class="bot-input">
    <input placeholder="优质评论将会优先展示" focus placeholder-class="color:#EEE" @blur="blurInput" />
  </view>
  <button class="bot-btn">发布</button>
</view>

通过v-if来判断它们什么时候显示，在data里设一个默认显示的值hidden:true（hidden的值是什么自己定义）

data() {
  return {
    hidden: true,
},

给它一个点击事件review

点击的时候显示评论框

/**
 * 显示评论框
 */
review() {
  this.hidden = false
},

输入框别忘了
属性focus(获取焦点，键盘才会弹起来)
@blur失去焦点触发

<view class="bot-input">
  <input placeholder="优质评论将会优先展示" focus placeholder-class="color:#EEE" @blur="blurInput" />
</view>

/**
 * 显示评论框
 */
review() {
  this.hidden = false
},
/**
 * 评论框失去焦点是隐藏
 */
blurInput(){
  this.hidden = true
},

到这里就没有了哦~~~