小程序实现列表点赞功能


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中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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计划任务、定时执行任务的实现代码
2011/04/23 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python实现发送邮件及附件功能
2021/03/02 Python
python如何实现视频转代码视频
2019/06/17 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
通信工程毕业生求职信
2013/11/16 职场文书
现场活动策划方案
2014/08/22 职场文书
实习介绍信模板
2015/01/30 职场文书
实习单位推荐信
2015/03/27 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
《落花生》教学反思
2016/02/16 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python