小程序实现列表点赞功能


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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
Angular实现form自动布局
Jan 28 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
javascript 禁止复制网页
2009/06/11 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python 性能提升的几种方法
2016/07/15 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python随机取list中的元素方法
2018/04/08 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python实现简易淘宝购物
2019/11/22 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python输出指定字符串的方法
2020/02/06 Python
python help函数实例用法
2020/12/06 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
Java程序员面试90题
2013/10/19 面试题
护理专业优质毕业生自荐书
2014/01/31 职场文书
什么是就业协议书
2014/04/17 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
介绍信怎么写
2015/05/05 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript