小程序实现列表点赞功能


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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
js日历功能对象
Jan 12 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
node中的session的具体使用
Sep 14 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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框架Phpbean说明
2008/01/10 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
小程序实现多列选择器
2019/02/15 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python数据结构之图的应用示例
2018/05/11 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
用python批量下载apk
2020/12/29 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
安全生产管理责任书
2014/04/16 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
美国留学经济担保书
2014/05/20 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Python开发简易五子棋小游戏
2022/05/02 Python