可以通過以下代碼實現點贊效果，且只能點贊一次：

<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": "長這么大，第一次坐飛機，第一次自由行，第一次看下雪，心情很緊張而且很害怕（害怕失聯(lián)啊，你們懂的T^T~~~~~~~~~），期待已久的愿望終于實現了。。。這次旅行計劃了很久，糾結過很多個地方，由東北三省到華東五市，再到海南三亞（避寒圣地），就連出國都想過了（想看人妖唄，開玩笑的，呵呵呵！咱倆還把護照都給辦好了╮(╯▽╰)╭），每個地方都想去，但是最后我們還是選擇了充滿浪漫情懷的山東青島。冬天的海邊真的會冷死人，但是咱倆無懼寒風，向著浪漫的山東青島奔去了。由于是第一次兩個女孩出行，就選擇一個比較安全的路線，威?！鄭u——濟南，雖然不是旅游旺季，但我們欣賞的卻是寧靜浪漫的德國風情。。。^ω^",
      "date": "2014-12-20 出發(fā)",
      "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": "中國國家地理中國最美十大海島之六：廟島列島（長島），錯過了海鷗滿天飛翔的季節(jié)，十月的長島別樣的美麗。　　長島旅游優(yōu)點：水質清澈，跟山泉水有得一拼；4-8月份滿天海鷗，所以海鷗多是因為這里的生物多樣性，魚很多。時間對了更有野生環(huán)斑海豹；山和礁石獨特壯美。　　交通方便，到碼頭不論去哪個島嶼乘船方便，價格不貴。風景美艷度★★★★★，景點性價比很高，對得起門票的價格，驚喜。",
      "date": "2017-10-14 出發(fā)",
      "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": "環(huán)游?美食?海濱海島?徒步",
      "user_name": "潮流vision"
    }]

skuList

?

點贊前

?

點贊后

?

重復點贊文章來源地址http://www.zghlxwxcb.cn/news/detail-503559.html

到了這里，關于微信小程序實現點贊功能（前端）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！