小程序，超简单点赞系统

如果您有兴趣点开我这篇文章，说明我们十分有缘。

废话不多说，直接上效果图。

我也是新手，如果大家觉得有用不妨点个赞吧。

index.wxml

<view class="page">
  <view class="comments">
    <view class="allcom">
      全部评论
    </view>
    <!-- 用data-index 来传入下标 -->
    <view class="comment" wx:for="{{coms}}" wx:key="id" data-index= "{{index}}">
      <view class="c-left">
        <image src="{{item.hpic}}"></image>
      </view>
        <view class="c-right">
          <view class="c-right_top">{{item.call}}</view>
          <view class="c-right_bottom">
            {{item.comment}}
            <view class="change"  >
              <!-- 用wx:if=""来根据whether的值来判断点赞的颜色，bindtap绑定事件 -->
              <text class=".iconfont .icon-dianzan " 
                    wx:if="{{item.whether == 0}}" 
                    bindtap="light"
                    data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
              <text class=".iconfont .icon-dianzan changed"
               wx:else
               bindtap="light"
               data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
            </view>
          </view>
          
       </view>
    </view>
  </view>
  
</view>

index.js

Page({
data: {
    "coms":[
        {
          "id":0,
          'whether':0,
          "hpic":'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200507%2F611083a06f4b486186df0558bb7a5925.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630146060&t=d9d918cfcea58f28cedeca112b655526',
          "call":'Grandia',
          "comment":'宫本没吃到兵，你也补不到',
          "date":'01月10日15：21',
          "num":'0'
        }
    ]
},
light:function(e){
    console.log(e);
    //接受传过来的下标
    let index = e.currentTarget.dataset.index;
    let message = this.data.coms;
    for(let i in message){
        if(i == index){
            let whetherif = false;
            if(message[i].whether ==  0){
                whetherif = true;
                message[i].whether =parseInt(message[i].whether) + 1;
                message[i].num =parseInt(message[i].num ) + 1;
            }else{
                whetherif = false;
                message[i].whether =parseInt(message[i].whether) - 1;
                message[i].num =parseInt(message[i].num) - 1;
            }
        }
    }
    // 逻辑关系后，重置数据
    this.setData({
        coms:message
    })
}
})

index.wxss

page{
    background-color: #000;
}
.allcom{
  padding-left: 20rpx;
  padding-top: 20rpx;
}
.page{
  color: #ffffff;
}
.comment{
  display: flex;
}
.c-left{
  height:200rpx;
  width: 20vw;
}
.c-left image{
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  display: block;
  margin:   30rpx auto ;
  border: 0.1rpx solid grey;
}
.c-right{
  height:200rpx;
  width: 80vw;
}
.c-right_top,.c-right_bottom{
  padding: 0 0 20rpx 0;
  position: relative;
  
}
.change{
  position: absolute;
  right: 40rpx;
  top: 0rpx;
}
.changed{
  color:red
}
.inc{
  color: #b1b1b1;
}

ali.wxss

@import "./ali.wxss";
@font-face {
    font-family: "iconfont"; /* Project id 2760657 */
    src: url('//at.alicdn.com/t/font_2760657_8zwk8q6f1s5.woff2?t=1629567892722') format('woff2'),
         url('//at.alicdn.com/t/font_2760657_8zwk8q6f1s5.woff?t=1629567892722') format('woff'),
         url('//at.alicdn.com/t/font_2760657_8zwk8q6f1s5.ttf?t=1629567892722') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-dianzan:before {
    content: "\e60c";
  }

其中ali.wxss中的数据是冲阿里矢量库中得到的。

找到合适的图片，点击购物车的图标

最后把里面的代码复制，粘贴到index文件夹中新建的ali.wxss里面，别忘了要在index.wxss中用@import引入进来。

最后感谢大家的观看。