今天完成的事情：

点赞功能
明天计划的事情：

文章详情点赞功能出现BUG

下拉加载页面
遇到的问题：

问题

注意：

this.setData({
   wantImg[i].img:"./img/点赞/png"
})
//错误写法

在setData()里面只能填写对象向这种数组改变值微信程序是会报错的。微信小程序是没有双向数据绑定，所以如果你后台更改变了值只能通过setData()来和你视图层进行交互渲染。

这里有个口诀就是先取值 在赋值 ，什么意思呢。就是你在外面先把你改变对象的值取出来准备好，然后在setdata()里面直接赋值就行了.就如上面第一个代码。

解决：

this.setData({
      ["wantImg[" + index + "].cs"]: "./img/点赞.png",
       ["wantImg[" + index + "].aa"]: false
      });

这是我找的第一种写法可以解决上面报错原因，因为setData是只能对象与对象改变值 如用数组改变值是不允许的。

第二种方法师兄教的

先取值在赋值

this.data.wantImg[index].img = "./img/图层1.png";
      this.data.wantImg[index].judge = true;
      this.setData({
        wantImg: this.data.wantImg
    });

就是把值全部变成对象，然后直接进行覆盖就OK了.

注意：

 var obj = {
           img: './img/student.png',
           judge: false,
         }
         for (let i = 0; i < this.data.namber; i++) {
           var obj = {
           img: './img/student.png',
           judge: false,
         }
           this.data.wantImg.push(obj);
          
         }
         this.setData({
           wantImg: this.data.wantImg
         });
         
         console.log(this.data.wantImg)
       }

这个坑不知道是什么原因导致的，就是当你把obj放在for循环外面的话你你往wantImg[]数组里面添加对象元素的话打印出来也是10个对象元素。

问题在于你渲染出来后点击图片切换它切换的是全部图片。

就是说：我点击改变数组wantImg[3].img 图片，只改10元素里面的其中一个，其他元素不变而它改变的是数组[0--9]全部，所以不太明白原因。

问题解决:

      for (let i = 0; i < this.data.namber; i++) {
           var obj = {
           img: './img/student.png',
           judge: false,
         }
           this.data.wantImg.push(obj);
    }
     this.setData({
       wantImg: this.data.wantImg
     });
     
     console.log(this.data.wantImg)
   }

你要把var obj 放在循环里面一起添加就不会出现点击一个上面的全部图片更改.

收获：

点赞功能

第一步获取到值

<image  
               bindtap="likeName" 
               data-index="{{index}}" 
               class="like_image"  

               src="{{wantImg[index].img}}"></image>

首先我这图片是循环出来10个。

var obj = {
           img: './img/点赞.png',
           judge: false,
         }
         for (let i = 0; i < this.data.namber; i++) {
           this.data.wantImg.push(obj)
         }
         this.setData({
           wantImg: this.data.wantImg
         });

this.data.namber是我从接口获取到当前数据显示是10条，它是10

然后我们要循环出我们的图形数组。

this.data.wantImg.push(obj)

通过往wantImg[]，这个数组里面添加10遍我创建好的对象 obj对象。那么它最后循环完成得到的数据其实是

wantImg[{img: './img/点赞.png', judge: false, }，{img: './img/点赞.png', judge: false, }，{img: './img/点赞.png', judge: false, }......]10个这样的对象.

通过this.setData()进行赋值覆盖。

第二种写法（不推荐这种写法）

this.setData({
      ["wantImg[" + index + "].cs"]: "./img/点赞.png",
       ["wantImg[" + index + "].aa"]: false
      });

这种写法可以单独的提取数组的某一个值然后进行改变也可以循环改变。但不建议你这么写如果你想单独更改某个数组的值建议还是先提取值在赋值.

      this.data.wantImg[index].img = "./img/图层1.png";
      this.data.wantImg[index].judge = true;
      this.data.listNeed[index].number_of_likes++
      this.setData({
        wantImg: this.data.wantImg
    });

第二步点击当前图片更改图片变化

要记住通过数据和状态来改变视图层

<image  
               bindtap="likeName" 
               data-index="{{index}}" 
               class="like_image"  
               src="{{wantImg[index].img}}"></image>

通过bindtap事件来调取函数方法.data-index="{{index}}" 来获取下坐标

likeName(event) {
   var index = event.currentTarget.dataset.index;
   console.log(index);
   console.log(this.data.wantImg[index].img,index);
   if (this.data.wantImg[index].judge == false) {
     this.data.wantImg[index].img = "./img/teache.png";
     this.data.wantImg[index].judge = true;
        this.data.listNeed[index].number_of_likes++;
     this.setData({
       wantImg: this.data.wantImg,
      listNeed: this.data.listNeed
     });
   } else if (this.data.wantImg[index].judge == true) {
     this.data.wantImg[index].img = "./img/student.png";
     this.data.wantImg[index].judge = false;
     this.data.listNeed[index].number_of_likes--;
     this.setData({
       wantImg: this.data.wantImg,
       listNeed: this.data.listNeed
     });
   }
 },

首先说下逻辑，

你先打印出来event获取下坐标.下坐标就当没个图片的ID我循环出10种相同图片当我要让计算机知道我点击的是那个图片，可以函数回调你点击的地方是那个ID通过ID我们来判读改变其中的值和状态.

第一步

通过likeName(event)回调函数获取下坐标然后在函数里面创建一个变量var index，赋值

第二步

通过判断图片的状态， if (this.data.wantImg[index].judge == false)，最开始的原始数据图片状态都是false通过后在里面更改图片更改状态，同时点赞数加1

this.data.wantImg[index].img = "./img/teache.png"; this.data.wantImg[index].judge = true;

然后通过setData()重新赋值渲染到页面上去

<span md-inline="plain" 第三步<="" span="" style="word-break: break-all;">

取消点赞回复原来的图片同时点赞减1

和第二步一样只是判断的值从false变成的true，如果你已经点赞了那么你的状态值已经被我改变成true，更改图片和状态,把点击过的状态true取消掉换成false。