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

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

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

wxml

1.  
   .card{
2.  
    
3.  
   width: 93%;
4.  
   margin-left: 5%;
5.  
   height: 350rpx;
6.  
   background: Ivory;
7.  
   border-radius: 20rpx;
8.  
   box-shadow: 2px 4px 6px #e7c425,0px 1px 2px #bf2fcb;
9.  
   margin-top: 3vh;
10.  
    flex-direction: row;
11.  
    justify-content: center;
12.  
    align-items: center;
13.  
    display: flex;
14.  
    }
15.  
    .card .card-left{
16.  
    width: 40%;
17.  
    height: 100%;
18.  
    border-radius: 10%;
19.  
    overflow: hidden;
20.  
    }
21.  
    .card .card-left .left-image{
22.  
    width: 100%;
23.  
    height: 93%;
24.  
    padding: 10rpx;
25.  
    border-radius: 20rpx;
26.  
    overflow: hidden;
27.  
    }
28.  
    .card .card-right{
29.  
    padding-left: 3vh;
30.  
    width: 55%;
31.  
    height: 100%;
32.  
     
33.  
    }
34.  
     
35.  
    .card .topText{
36.  
    align-items: center;
37.  
    margin: 0.5vh;
38.  
    font-size: 40rpx;
39.  
    font-weight: bold;
40.  
    background: linear-gradient(to right, #e8a71a, #ff744a);
41.  
    -webkit-background-clip: text;
42.  
    background-clip: text;
43.  
    color: transparent;
44.  
    display: -webkit-box;
45.  
    -webkit-box-orient: vertical;
46.  
    -webkit-line-clamp: 1; /* 指定显示文本的行数 */
47.  
    overflow: hidden; /* 超出隐藏 */
48.  
    text-overflow: ellipsis; /* 超出部分显示省略号 */
49.  
    }
50.  
    .card .MiddleText{
51.  
    margin: 0.5vh;
52.  
    font-weight: bold;
53.  
    font-size: small;
54.  
    display: -webkit-box;
55.  
    -webkit-box-orient: vertical;
56.  
    -webkit-line-clamp: 4; /* 指定显示文本的行数 */
57.  
    overflow: hidden; /* 超出隐藏 */
58.  
    text-overflow: ellipsis; /* 超出部分显示省略号 */
59.  
    }
60.  
    .card .van-tag{
61.  
    width: 80%;
62.  
    display: -webkit-box;
63.  
    -webkit-box-orient: vertical;
64.  
    -webkit-line-clamp: 1; /* 指定显示文本的行数 */
65.  
    overflow: hidden; /* 超出隐藏 */
66.  
    text-overflow: ellipsis; /* 超出部分显示省略号 */
67.  
    }
68.  
    .card .BottomDate{
69.  
    flex-direction: row;
70.  
    font-size: small;
71.  
    font-weight: bolder;
72.  
    }
73.  
    .card .BottomDate .watchIcon{
74.  
    position: absolute;
75.  
    right: 100rpx;
76.  
    }
77.  
    .card .BottomDate .loveIcon{
78.  
    position: absolute;
79.  
    right: 30rpx;
80.  
    }
81.  
    .card .BottomPrice{
82.  
    color: red;
83.  
    font-size: large;
84.  
    font-weight: bolder;
85.  
    }

wxss

1.  
   addLoveIconNum(e){
2.  
   console.log(e.currentTarget.dataset.index)
3.  
   let i=e.currentTarget.dataset.index
4.  
   let changedData=this.data.skuList[i].icon_love 1
5.  
    
6.  
   if (typeof this.data.skuList[i].hasLiked != 'undefined'||this.data.skuList[i].hasLiked) {
7.  
   wx.showToast({
8.  
   title: '您已经点过赞了',
9.  
   icon: 'none'
10.  
    });
11.  
    return;
12.  
    }
13.  
    if(typeof this.data.skuList[i].hasLiked == 'undefined'){
14.  
    this.setData({
15.  
    [`skuList[${i}].icon_love`]:changedData,
16.  
    [`skuList[${i}].hasLiked`]: true
17.  
    })
18.  
    }
19.  
    },

js

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

skuList

点赞前

点赞后

重复点赞

这篇好文章是转载于：学新通技术网