本文 主要讲 大概的实现，思路。有不同想法的可以私信我。

首先的话是准备工作

布局

自己模拟的后台传送数据

commandArraylist:[
      {
        userUrl:'/assets/logo/jiatui-logo.jpg',
        articleUrl:'/assets/images/simple.jpg',
        username:'心动云',
        userpression:'公司',
        articleTitle:'2019，深圳开荒牛的TO B拓荒路',
        data:'昨天',
        praiseFlag:false,
        lovePointUser:'稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',
        commandUserList:[
          {
            name:'zero',
            text:'厉害'
          },
          {
            name: '华仔',
            text: '不错'
          },
          {
            name: '方知',
            text: 'hello'
          },
          {
            name: '吴氏生飞 地产老猫',
            text: '好产品'
          },
        ]
      },
      {
        userUrl: '/assets/logo/jiatui-logo.jpg',
        articleUrl: '/assets/images/simple.jpg',
        username: '加推科技',
        userpression: '公司',
        articleTitle: '2019，深圳开荒牛的TO B拓荒路',
        data: '昨天',
        praiseFlag: false,
        lovePointUser: '稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',
        commandUserList: [
          {
            name: 'zero',
            text: '厉害'
          },
          {
            name: '华仔',
            text: '不错'
          },
          {
            name: '方知',
            text: 'hello'
          },
          {
            name: '吴氏生飞 地产老猫',
            text: '好产品'
          },
        ]
      },
      {
        userUrl: '/assets/logo/jiatui-logo.jpg',
        articleUrl: '/assets/images/simple.jpg',
        username: '加推科技',
        userpression: '公司',
        articleTitle: '2019，深圳开荒牛的TO B拓荒路',
        data: '昨天',
        praiseFlag: false,
        lovePointUser: '稻草人,玩笑而,加推你好啊,万众杀戮空间,是街坊邻居',
        commandUserList: [
          {
            name: 'zero',
            text: '厉害'
          },
          {
            name: '华仔',
            text: '不错'
          },
          {
            name: '方知',
            text: 'hello'
          },
          {
            name: '吴氏生飞 地产老猫',
            text: '好产品'
          },
        ]
      },
    ]

还有就是在 每个评论上面加一个自定义数据，我是data-current=index，来标识每个不同的动态分享，不然一点赞，就所有动态都点赞了，就不好了。在data里面定义一个commandTab,接收这个自定义值，留着后面大用

第一：我们先做评论和点赞框带动画的显示事件commandClick（点完显示赞，和评论的那个横框框，名字取得 随意吧。。）

first:获取这一条动态的唯一标识符，就是前面说的dataset的数据，然后，吧值赋给commandTab,就能做到指定显示，

        <view class="list-command-btn" wx:if='{{commandTab == index}}' animation="    {{animationData}}">   
            //这里的 commandTab == index 控制指定的评论和点赞区的显示 
          <view class="btn-command" bindtap="praiseThumbsClick" >
            <image src="/assets/logo/love.png"></image>
            <text hidden="{{item.praiseFlag}}">赞</text>
            <text hidden="{{!item.praiseFlag}}">取消</text>
          </view>
          <text>|</text>
          <view class="btn-command" bindtap="inputCommandClick">
            <image src="/assets/logo/consultation.png"></image>
            <text>评论</text>
          </view>
        </view>

second：

在 这个 过程中加上动画，第一次点击显示，再点隐藏，再点显示，再点隐藏。

我的思路呢就是，data加一个commandHiddenFlag 标识框框的显示 还是隐藏，

我的主要想法，给commandTab初始值99，点击的时候，判断commandTab和current是否相等，当然是不相等 我们commandTab初始值设的是99

如果不相等：commandHiddenFlag 的值变成false，评论区由隐藏——>显示，做一个出现的动画，吧current赋值给  commandTab,标识我们现在评论区已经显示了，

如果相等：current==commandTab说明是刚才点击过了，评论区由显示—>隐藏，做一个慢慢退厂的动画，

关键点：每个退厂之后，都要把commandTab重新赋值为99（设一个定时器200毫秒）,表示一次结束，不然current==commandTab就一直相等了，就没有出现动画了

然后，我们再来做点赞功能，

点赞就比较简单了，根据刚才的commandTab找到 指定动态，在json数组里面的位置，吧里面的赞标识符praiseFlag改成false就行了.

评论功能

评论我自己做的比较乱，主要问题就是，点击评论的时候，我获取不到在父元素点赞评论区域 上设置的的data-set

为什么评论会出现这个问题？点赞不会出现，

因为：评论的时候，输入框弹出来，点赞评论区域已经隐藏了，那么commandTab变成99，等我输入完评论以后，就找不到当前动态的标识符了，找不到就不能修改json 数组里面的数据，而点赞的时候，commandTab还没有变成99,设一个定时器200毫秒。

点击右边的评论按钮，点赞评论区显示——>点赞（评论）按钮——>点赞评论区隐藏

卡点：父元素上设置的dataset，在子元素上面获取不到，

迁就解决办法，再来一个变量，在前面的父元素的操作中，就是点赞评论区展开动画的时候，保留下来获取到的父元素的dataset

评论的那个弹框，我的处理是，input先fixed隐藏在最下面，点了评论以后显示，同时focus

一个是 吧底部的input推上来的效果，推上来会被盖住，一部分，用cursor-spacing调一下距离，