小程序--数据更新--点赞功能

小程序–组件中的属性值和初始数据的更新

举个小栗子：平时经常遇到的点赞小功能

• 点击?形图标，心心点亮，点赞数+1；
• 再次点击?形图标，心心变暗，点赞数-1；
• 此处涉及到心心图标和点赞数的更新，具体实现如下⤵️
  
  html代码：

<view bind:tap="onLike" class="container">
  <image src="{{like ? yesSrc : noSrc }}" />
  <text>{{count}}</text>
</view>

css代码：

.container{
  /* flex布局（inline-flex）使块状元素消除，同时让盒子自适应 */
  display:inline-flex;
  flex-direction: row;
  padding:10rpx;
  width:90rpx;
}
.container image{
  width:32rpx;
  height:28rpx;
}
.container text{
  font-size:24rpx;
  line-height: 24rpx;
  color:#bbb;
  position:relative;
  bottom:10rpx;
  left:6rpx;
}

js代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 外部传入数据
    
  },

  /**
   * 组件的初始数据
   */
  data: { // 组件内部数据
 	like: false,
    count: 0,
    yesSrc: 'images/like.png', // 点赞时的图片路径
    noSrc: 'images/like@dis.png' // 没有点赞时的图片路径
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLike: function(e) {
      let like = this.properties.like
      let count = this.properties.count
      count = like ? count - 1 : count + 1
      this.setData({ // 更新数据
        like: !like,
        count: count
      })
    }
  } 
})

到此，页面上的心形点赞功能就实现啦。如果小伙伴们项目里用到此功能的话，记得对接后台接口呦~不然只是页面上的样式有变化，一刷新又恢复原状了呢！

结语：this.setData({ key: value })
它的作用主要是做数据更新，小程序中的data数据更新，必须通过setData来做。不光是data里的数据，properties里的属性值也是用 setData({}) 来更新的。