基于微信小程序的用户列表点赞功能

立即下载用AI写一个

发布时间：2018-09-05

37人 | 浏览：9642次 | 收藏 |

技术：微信小程序

运行环境：微信开发者工具

概述

基于微信小程序的用户列表点赞功能

详细

#### 一、前言
##### （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、案例目录结构
![](http://www.demodashi.com/contentImages/image/20180904/fcqyj2X6LvOu0ZID937.png)

#### 三、程序实现具体步骤
##### 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
    }]
```

#### 四、案例运行效果图
![](/contentImages/image/20180905/oclEm5wAs5ftKuKtY4x.gif)

#### 五、总结与备注

暂无

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

基于微信小程序的用户列表点赞功能

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子