小程序实现列表点赞功能


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 用6N±1法求素数 实例教程
Oct 20 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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 mssql 时间格式问题
2009/01/13 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
js实现转动骰子模型
2019/10/24 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python计算书页码的统计数字问题实例
2014/09/26 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python中os模块功能与用法详解
2020/02/26 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
医学生职业规划范文
2014/01/05 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
教师辞职书范文
2015/02/26 职场文书
施工安全员岗位职责
2015/04/11 职场文书
大国崛起日本观后感
2015/06/02 职场文书
电影地道战观后感
2015/06/04 职场文书
安全第一课观后感
2015/06/18 职场文书
童年读书笔记
2015/06/26 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
HAM-2000摩机图
2021/04/22 无线电
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python