小程序实现列表点赞功能


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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
理解jQuery stop()方法
Nov 21 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue实现记事本功能
Jun 26 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编程中八种常见的文件操作方式
2006/11/19 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
代码生成器 document.write()
2007/04/15 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
继承公证书
2014/04/09 职场文书
初中学生评语大全
2014/04/24 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
导游词之阆中古城
2019/12/23 职场文书