微信小程序实现点赞功能（前端）

可以通过以下代码实现点赞效果，且只能点赞一次：

<view class="card-right">
  <text class="topText">{{item.title}}</text>
  <text class="MiddleText">简介:{{item.content}}</text>
  <!-- <view class="BottomIntro">{{item.genre}}</view> -->
  <van-tag  plain  text-color="#FF8247" size="medium" class="van-tag">{{item.date}}</van-tag>
  <view class="BottomPrice">花费 {{item.fee}}</view>  
  <view class="BottomDate">
  <view class="watchIcon">👀{{item.icon_view}}</view>
  <view class="loveIcon" bindtap="addLoveIconNum" data-index="{{index}}">💗{{item.icon_love}}</view>
  </view> 
</view>

wxml

.card{

  width: 93%;
  margin-left: 5%;
  height: 350rpx;
  background: Ivory;
  border-radius: 20rpx;
  box-shadow: 2px 4px 6px #e7c425,0px 1px 2px #bf2fcb;
  margin-top: 3vh;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
 }
 .card .card-left{
  width: 40%;
  height: 100%;
  border-radius: 10%;
  overflow: hidden; 
 }
 .card .card-left .left-image{
  width: 100%;
  height: 93%;
  padding: 10rpx;
  border-radius: 20rpx;
  overflow: hidden;
}
 .card .card-right{
  padding-left: 3vh;
  width: 55%;
  height: 100%;

 }

 .card .topText{
   align-items: center;
   margin: 0.5vh;
   font-size: 40rpx;
  font-weight: bold;
  background: linear-gradient(to right, #e8a71a, #ff744a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 指定显示文本的行数 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
 }
 .card .MiddleText{
   margin: 0.5vh;
   font-weight: bold;
   font-size: small;
   display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 指定显示文本的行数 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
 }
 .card .van-tag{
    width: 80%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 指定显示文本的行数 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
 }
 .card .BottomDate{
  flex-direction: row;
  font-size: small; 
  font-weight: bolder;
 }
 .card .BottomDate .watchIcon{
  position: absolute;
  right: 100rpx;
 }
 .card .BottomDate .loveIcon{
  position: absolute;
  right: 30rpx; 
 }
 .card .BottomPrice{
   color: red;
   font-size: large;
   font-weight: bolder;
 }

wxss

addLoveIconNum(e){
    console.log(e.currentTarget.dataset.index)
    let i=e.currentTarget.dataset.index
    let changedData=this.data.skuList[i].icon_love+1

    if (typeof this.data.skuList[i].hasLiked  != 'undefined'||this.data.skuList[i].hasLiked) {
      wx.showToast({
        title: '您已经点过赞了',
        icon: 'none'
      });
      return;
    }
    if(typeof this.data.skuList[i].hasLiked  == 'undefined'){
      this.setData({
        [`skuList[${i}].icon_love`]:changedData,
        [`skuList[${i}].hasLiked`]: true
      })
    }   
},

js

"skuList": [
    {
      "content": "长这么大，第一次坐飞机，第一次自由行，第一次看下雪，心情很紧张而且很害怕（害怕失联啊，你们懂的T^T~~~~~~~~~），期待已久的愿望终于实现了。。。这次旅行计划了很久，纠结过很多个地方，由东北三省到华东五市，再到海南三亚（避寒圣地），就连出国都想过了（想看人妖呗，开玩笑的，呵呵呵！咱俩还把护照都给办好了╮(╯▽╰)╭），每个地方都想去，但是最后我们还是选择了充满浪漫情怀的山东青岛。冬天的海边真的会冷死人，但是咱俩无惧寒风，向着浪漫的山东青岛奔去了。由于是第一次两个女孩出行，就选择一个比较安全的路线，威海——青岛——济南，虽然不是旅游旺季，但我们欣赏的却是宁静浪漫的德国风情。。。^ω^",
      "date": "2014-12-20 出发",
      "days": "共8天",
      "fee": "人均2606元",
      "hasLiked": true,
      "icon_comment": 7,
      "icon_love": 31,
      "icon_view": "1.4万",
      "id": "64155ec373bb904677c83016",
      "link": "https://travel.qunar.com/youji/4972998",
      "picurl": "https://img1.qunarzz.com/travel/d4/1501/87/87ddf8d2773238f9cdb.jpg_160x120x95_11f99ee1.jpg",
      "title": "阴公猪和羊羊羊的第一次两人行",
      "trip": "购物?美食?温泉?海滨海岛?第一次",
      "user_name": "mrdazqr"
    },
    {
      "content": "中国国家地理中国最美十大海岛之六：庙岛列岛（长岛），错过了海鸥满天飞翔的季节，十月的长岛别样的美丽。　　长岛旅游优点：水质清澈，跟山泉水有得一拼；4-8月份满天海鸥，所以海鸥多是因为这里的生物多样性，鱼很多。时间对了更有野生环斑海豹；山和礁石独特壮美。　　交通方便，到码头不论去哪个岛屿乘船方便，价格不贵。风景美艳度★★★★★，景点性价比很高，对得起门票的价格，惊喜。",
      "date": "2017-10-14 出发",
      "days": "共4天",
      "fee": "人均200元",
      "icon_comment": 21,
      "icon_love": 79,
      "icon_view": "2.5万",
      "id": "64155ec373bb904677c83017",
      "link": "https://travel.qunar.com/youji/6927192",
      "picurl": "https://img1.qunarzz.com/travel/d6/1710/8c/2c3709bf7133b7b5.jpg_160x120x95_5023b438.jpg",
      "title": "10月遇见收获的“长岛”",
      "trip": "环游?美食?海滨海岛?徒步",
      "user_name": "潮流vision"
    }]

skuList

 

点赞前

 

点赞后

 

重复点赞