If you are interested in opening my article, we are very predestined relationship.

Without further ado, go straight to the renderings.

I’m new to this, so if you find it useful, please give it a thumbs up.

index.wxml

<view class="page">
  <view class="comments">
    <view class="allcom">All comments</view>
    <! -- Use data-index to pass subindex -->
    <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"  >
              <! -- use wx:if="" to determine the color of the like based on the value of whether -->
              <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>
Copy the code

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%2F611083a06f4b48 6186 df0558bb7a5925.jpeg&refer=http%3a%2f%2f5b0988e595225.cdn.sohucs.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT =, jpe. g?sec=1630146060&t=d9d918cfcea58f28cedeca112b655526'."call":'Grandia'."comment":'Miyamoto didn't get a pawn, you can't make it up.'."date":'15:21, 10th Of January'."num":'0'}},light:function(e){
    console.log(e);
    // Accept the subscript
    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; }}}// After the logical relationship, reset the data
    this.setData({
        coms:message
    })
}
})
Copy the code

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;
}

Copy the code

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";
  }
Copy the code

Among them, the data in Ali. WXSS is obtained from the Chongali vector library.

Find the right picture and click on the cart icon

Finally, copy and paste the code inside the new ali. WXSS folder in the index folder. Don’t forget to import @import in the index. WXSS.

Thank you for watching.