小程序实现列表点赞功能


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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
vue实现循环滚动列表
Jun 30 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 分页函数multi() discuz
2009/06/21 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
javascript组合使用构造函数模式和原型模式实例
2015/06/04 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python中DJANGO简单测试实例
2015/05/11 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
路政管理专业推荐信
2013/11/11 职场文书
图书室标语
2014/06/21 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
小英雄雨来观后感
2015/06/09 职场文书
六年级作文之自救
2019/12/19 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python