小程序 朋友圈，点赞， 评论，发布动态，功能，局部刷新数据之 -----点赞

小程序 朋友圈功能之 ----->点赞

后台返回的数据格式：

{code:0,
data:{
 		{
            "id": "174",  //动态id
            "content": "为什么要让我去",    //动态吻戏内容 
            "pic_arr": [	//动态图片
                "https://c768477e0b44970498b904a21e9c5.jpg",
                "https://43e427f103ff9c2120a1b1283cddb67d.jpg"
            ],
            "create_time": "1576201765", //动态创建时间
            "is_del": "1",     //动态是否能删除
            "user_id": "10",  //动态创建者
            "is_like":false,  //动态创建者是否点赞
            "zan": [ //点赞列表
                {
                    "zan_id": "473",//点赞id
                    "user_id": "50" //点赞者id
                    "list_id": "174", //动态id
                    "create_time": "1576201777", //点赞创建时间
                    "user_headimg": "http://weoGjvGQ/0",  //点赞者头像
                    "nick_name": "周van"  //点赞者称谓
                }
            ],
            "comment": [ //评论列表
                {
                    "comment_id": "269", //评论id
                    "list_id": "174",  //动态id
                    "details": "fgff", //评论内容
                    "time": "1576203749", //评论创建时间
                    "user_id": "20", //评论者id
                    "user_headimg": "http:hnu2X9oGjvGQ/0", //评论者头像
                    "nick_name": "帆an" //评论者名字
                },
                {
                    "comment_id": "268",
                    "information_id": "174",
                    "details": "fgdfg",
                    "time": "1576203546",
                    "user_id": "10",
                    "user_headimg": "https://wxFibn9MZ2A/132",
                    "nick_name": "翛翾梓"
                }
            ]
        },
}
}

数据结构我就不解释了；
为了节省你们的时间，直接看效果

前端 点赞区域 --代码
css样式我就不写了

<view bindtap="zanTap" 
	  data-listId="{{item.id}}"  
      data-index="{{index}}">
	<image src="{{!item.is_like?'/pt-img37.png':'/pt-img38.png'}}"></image>
 	<text>{{ !item.is_like?'点赞':'取消'}}</text>
 </view>
<view class="zanList"> 
	<image wx:if="{{item.zan.length <1}}" src="http://i/pt-img29.png"></image>
	<image wx:if="{{item.zan.length >=1}}" src="/collect1.png"></image>
	<text wx:for="{{item.zan}}" wx:for-item="val"  wx:key="key">{{val.user_name}},</text>
</view>

js代码

// 点赞
  zanTap: function(eve) {  
	var e = this,
		dataList = e.data.dataList, //所有的动态的数据
		n = eve.currentTarget.dataset.index,  //点击那条数据的下标
		s = eve.currentTarget.dataset.listid,  //点击那条数据的list_id
		o = getApp().getCache("userinfo");
    wx.request({
	  url: netUrl + 'user_id=' + o.uid + '&id=' + s + '&s=/zan' + '&type=1',
      method: 'GET',
      success: (res) => {
       //此处我用的是三目运算
       //a.success()和a.toast()是我封装的弹框方法，你也可以不写，或者换成原生的
		1 == res.data.ok?(a.success("点赞成功"), dataList[n].likes.unshift({ 
			user_name: o.nickName,
			user_id:o.uid
		})
		) : a.toast(" 取消点赞 "),
		 e.listdata()//请求的所有动态数据的一个方法
      },
    })
  }, 

在做的时候为了局部数据刷新花了很长时间;
后台的这个点赞接口，交互原理是，如果没有点赞，单击就是点赞，否则就是取消点赞

我点赞的时候做到了数据的局部刷新
实现的方法是：

**1、**在页面渲染的时候，把index绑定到data_index上，
这样，点击的时候就能获取到index我们就能知道是第几条数据进行了交互；

**2、**然后就是就是把点赞的那个人的名字和id添加到 this.data.dataList里面而不用刷新页面从新去请求
但是，当取消点赞的时候，就做不了了，我当时用的filter将那条数据筛选过滤了，但是好像还是不行，就用了老办法，调用 listdata() 重新请求数据，然后奇怪的事情发生了，它没有刷新页面。
弄的时间有点长了，我就在没有研究，我这种方法是可以点赞

// 这就是实现局部刷新的方法
dataList[n].likes.unshift(
			{ 
			user_name: o.nickName,
			user_id:o.uid
			}
	)

A[长方形] – 链接 --> B((圆))

下一篇是 评论功能