基於微信小程序的用戶列表點贊功能

代碼地址如下：
http://www.demodashi.com/demo/13997.html

一、前言

（1）、適合人群

1.微信小程序開發者
2.前端工程師
3.想入門學習小程序開發的人員
4.想深入學習微信小程序前后端開發的人員

（2）、你需要准備什么？

1.能積極主動學習 , 踏實、不浮躁
2.前端基礎(HTML , CSS , JS 基礎)
3.一門后端語言 ,例如(PHP , Java , C , C# 等等......) 本人會以世界上最友好的語言PHP講述小程序的后端接口的數據提供

二、前期准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 實現用戶對文章的點贊功能
• 實時動態展示

2、案例目錄結構

三、程序實現具體步驟

1.點贊index.wxml代碼

<view class="container">
  <view class="list" wx:for="{{list}}" wx:key="key" wx:for-item="item" wx:for-index="index">
    <view class="praise {{item.hasChange? 'changed': ''}}" hover-class="hover_praise" bindtap="praiseThis" data-curIndex="{{index}}">{{item.praise}}</view>
    <view class="author">{{item.author}}</view>
    <view class="info">{{item.info}}</view>
  </view>
</view>

2.點贊index.wxss代碼

.container {
  background: #fff;
  height: 100%;
  font-family: 'Miscrsoft YaHei'
}
 
.list {
  background: #2EB3FF;
  position: relative;
  padding: 10px 10px 10px 70px;
  height: 50px;
  margin-bottom: 10px;
}
 
.praise {
  width: 50px;
  height: 50px;
  background: #999;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  transition: 0.5s;
  color: #000;
  background: #fff;
}
 
.hover_praise, .changed {
  transition: 0.5s;
  background: #ccc;
}
 
.author {
  display: block;
  height: 20px;
  color: #fff;
}
 
.info {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
}

3.點贊index.js邏輯代碼

a.點贊部分的功能實現

praiseThis: function (e) {
    var index = e.currentTarget.dataset.curindex;
    if (this.list[index]) {
      var hasChange = this.list[index].hasChange;
      if (hasChange !== undefined) {
        var onum = this.list[index].praise;
        if (hasChange) {
          this.list[index].praise = (onum - 1);
          this.list[index].hasChange = false;
        } else {
          this.list[index].praise = (onum + 1);
          this.list[index].hasChange = true;
        }
        this.setData({
          list: this.list
        })
      }
    }
  }

b.構建數據列表

list = [{
      'author': '萌兔子QAQ',
      'info': '我發現萌兔子,真的好帥!',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': '萌兔子QAQ',
      'info': '我發現萌兔子,真的好帥!',
      'praise': 133,
      'hasChange': false
    },
    {
      'author': '萌兔子QAQ',
      'info': '我發現萌兔子,真的好帥!',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': '萌兔子QAQ',
      'info': '我發現萌兔子,真的好帥!',
      'praise': 8,
      'hasChange': false
    },
    {
      'author': '萌兔子QAQ',
      'info': '我發現萌兔子,真的好帥!',
      'praise': 33,
      'hasChange': false
    }]

四、案例運行效果圖

五、總結與備注

暫無基於微信小程序的用戶列表點贊功能

代碼地址如下：
http://www.demodashi.com/demo/13997.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權