小程序实现列表点赞功能


Posted in Javascript onNovember 02, 2018

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了。

思路如下:

1.找到对应文章列表的id

(我用的是 wx:for 列表渲染 加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件)

2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存

后面通过缓存判断该文章是否已经点过赞,避免重复点赞

3.点赞和取消点赞要有对应的数量上 +1 或 -1 的变化

4.后台服务器的数据同步变化

代码如下

//点赞处理函数(xx.js文件)
 zan: function (item_id) {
  var that = this;
  var show;//传递到数据库点赞的状态   
  var cookie_mid = wx.getStorageSync('zan')||[];//获取全部点赞的mid    
  var newmessage = [];

  for (var i = 0; i < that.data.item_list.length; i++) {
   if (that.data.item_list[i].id == item_id) {//遍历找到对应的id
    var num = that.data.item_list[i].like_num;//当前赞数
    var isshow; //点赞的状态

    if (cookie_mid.includes(item_id)) {//说明已经点过赞,取消赞  
     for (var j = 0; j < cookie_mid.length; j++) {
      if (cookie_mid[j] == item_id) {
       cookie_mid.splice(j, 1);//删除取消赞的mid 
      }      
     }
     --num;
     isshow = 0;//点赞的状态
     that.setData({
      [`item_list[${i}].like_num`]: num, //es6模板语法(反撇号字符)
      [`item_list[${i}].favor_img`]: "../../image/favor.png",
     })
     wx.setStorageSync('zan', cookie_mid);
     wx.showToast({
      title: "取消点赞!",
      icon: 'none'
     }) 
     //console.log("前端取消点赞"+isshow)

    } else {
     isshow = 1;//点赞的状态
     ++num;
     that.setData({
      [`item_list[${i}].like_num`]: num,//es6模板语法(反撇号字符)
      [`item_list[${i}].favor_img`]: "../../image/favor_press.png",
     })
     cookie_mid.unshift(item_id);//新增赞的mid
     wx.setStorageSync('zan', cookie_mid);
     wx.showToast({
      title: "点赞成功!",
      icon: 'none'
     })
     //console.log("前端点赞成功" + isshow)
    }
    //console.log(cookie_mid); 
    //点赞数据同步到数据库
    wx.request({
     url: 'https://xxx.xxxx.xxx/zan.php',
     method: 'POST',
     header: { 'Content-Type': 'application/x-www-form-urlencoded' },
     data: {
      id: item_id,
      show: isshow,
     },
     success: function (res) {
      //console.log("show:" +show)
      //console.log(res.data);
     }
    }) 
   }
  }
 },

/**
 * 点赞
 */
 favorclick: function (options){
  var item_id = options.currentTarget.dataset.id;//此处找到列表的id
  //console.log(item_id);//列表id
  this.zan(item_id);
 },

注意点:

1. splice() 和 unshif() 函数是对数组的某一元素的删除和在原本的基础上添加元素,详细用法可自行查找。

2. [item_list[${i}].like_num]: num, 是es6模板语法(注意是反撇号字符)因为常规写法 ‘item_list[i].like_num': num 在数组动态 setData 时会报如下错误

3. ++num 和 ?num 不要写成 num++ 和 num? , 我就犯了这个错误,导致点赞时数量变化总是出错,搞得我检查了 n 多次逻辑运算应该没错啊,头晕得很。(怪自己基础不够牢啊!!)
4. 模板列表渲染如何能找到id呢?在 .wxml 文件中加上 {{id}} 即可,前提是你 wx:for 的 data 中 包含 id 这个字段:

小程序实现列表点赞功能

.wxml文件中

小程序实现列表点赞功能

5.这样实现基本的点赞功能了,但是页面刷新后,点赞图标又恢复了原始样式,这就需要在刷新时进一步判断了。

6.参考自fengye002011博客的这篇文章

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JS实现点击掉落特效
Jan 29 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python判断输入日期为第几天的实例
2018/11/13 Python
django 读取图片到页面实例
2020/03/27 Python
大数据分析用java还是Python
2020/07/06 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
上课说话检讨书500字
2014/11/01 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
python数据处理之Pandas类型转换
2022/04/28 Python