微信小程序点赞功能简单模拟

1. 首先是wxml中（登录用户）

  <!-- 只是模拟小部分数据 -->
  <block wx:for='{{threeDemo}}' wx:key>
    <view class="flex imgWidth">
      <view>
        <image src="../../img/indexDetail/false.png">
        </image>
      </view>
      <view class="contentOrd">
        <view>阿银</view>
        <view>家具家居设计风格重要，而且一旦定下来也很难改变。</view>
        <view class="flexData">
          <view>23:19</view>
          <view>
             <!-- istype返回的就是是否是点赞的登录用户的 -->
            <text class="cuIcon-appreciatefill lg {{item.istype?'text-blue':'text-grey'}}" bindtap="clickAddUp" data-item='{{item}}' data-id='{{index}}'></text>
            <text class="marginLeft10">{{item.count}}</text>
            <text class="cuIcon-message lg text-grey marginLeft20" bindtap="showModal"></text>
          </view>
        </view>
      </view>
    </view>
  </block>

2. 其次是js中

// pages/indexDetails/indexDetails.js
var app = getApp(); // 获取app里面的参数
const api = require("../../api/api.js") //  导出公用的地址  地址有可能会变
const requestAjax = require("../../api/request.js") //  导出公用请求的方法  地址有可能会变
Page({
  data: {
    threeDemo: [{
      id: 0,
      istype: true,
      count: 122
    }, {
      id: 1,
      istype: false,
      count: 100
    }, {
      id: 2,
      istype: false,
      count: 90
    }]
  },
  //  点赞
  clickAddUp(e) {
    // console.log(e.currentTarget.dataset.id)
    // console.log(e.currentTarget.dataset.item)
    //  进来之前看是否是已经点赞
    if (this.data.threeDemo[e.currentTarget.dataset.id].istype === false) {
      this.data.threeDemo[e.currentTarget.dataset.id].count++    // 需要这么写不然变量的话值不会增加
    } else {
      this.data.threeDemo[e.currentTarget.dataset.id].count--
    }
    // 点赞取反 
    this.data.threeDemo[e.currentTarget.dataset.id].istype = !this.data.threeDemo[e.currentTarget.dataset.id].istype
    this.setData({
      threeDemo: this.data.threeDemo // 需要更新数据
    })
  },
})