小程序实现列表点赞功能


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实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
javaScript基础语法介绍
Feb 28 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
JS常用知识点整理
2017/01/21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
linux下进程间通信的方式
2013/01/23 面试题
Ejb技术面试题
2015/04/29 面试题
财务会计专业推荐信
2013/11/30 职场文书
婚礼主持结束词
2014/03/13 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server