小程序实现列表点赞功能


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 相关文章推荐
js 纯数字不重复排列的另类方法
Jul 17 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
javascript打印输出json实例
Nov 11 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
js定时器实例分享
Dec 20 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
jQuery中DOM常见操作实例小结
Aug 01 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递归方法实现无限分类实例代码
2014/02/28 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python简单贪吃蛇开发
2019/01/28 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python 生成器需注意的小问题
2020/09/29 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
餐厅总厨求职信
2014/03/04 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
董事长助理工作职责
2014/06/08 职场文书
社区重阳节活动总结
2015/03/24 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL