小程序实现列表点赞功能


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脚本类
Aug 27 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python中的zip函数使用示例
2015/01/29 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python中url标签使用知识点总结
2020/01/16 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
小学元宵节活动总结
2015/02/06 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python