小程序列表局部刷新(点赞效果)

作者:燕歆波
简介:在小程序中实现点赞效果,并刷新当前item的状态

实现步骤

首先在data中定义了两个变量:
在渲染列表时，需要判断当前item的点赞状态,比如:如果状态是1，那么就是未点赞，需要设置图片为like，如果状态是0，那么已经点赞,需要设置图标unlike,如下:
由于在获取数据时，列表并没有提供isLike这个字段让我们判断,所以在获取数据列表时，我们为每一条数据增加一个字段：
这样我们就方便在页面中判断当前item的点赞状态;
在渲染列表时，增加一个点击事件:bindtap=‘addLike’,还需要将当前位置(data-index)传递过去,在js中，需要增加addLike事件来处理点赞逻辑:
在addLike方法中,获取点赞对象的数据,拿到index,接下来，就需要刷新index位置上的数据了:

获取index位置上的item对象,如果当前当前状态是1(未点赞),那么改变状态为0(点赞),反之亦然,然后通过setData方法,将index位置上的数据重新赋值,这样页面效果就出来了。
对于刚接触小程序没多久的人来说，setData里的语法真的想不到,我也是试了很多方式，最后没成功的原因主要是: 虽然实现了修改index位置上的item的状态,但是并没有赋值给列表中，所以页面始终是无法刷新的