小程序实现列表点赞功能


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创建命名空间(namespace)的最简实现
Dec 11 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js实现进度条的方法
Feb 13 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 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调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php组合排序简单实现方法
2016/10/15 PHP
没有document.getElementByName方法
2013/08/19 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python深入学习之闭包
2014/08/31 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
pycharm显示远程图片的实现
2019/11/04 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
网络工程师的自我评价
2013/10/02 职场文书
新学期校长寄语
2014/01/18 职场文书
公司管理建议书范文
2014/03/12 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
老人节主持词
2015/07/04 职场文书
体育教师研修感悟
2015/11/18 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
源码解读Spring-Integration执行过程
2021/06/11 Java/Android