小程序实现列表点赞功能


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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
编程语言JavaScript简介
Oct 16 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
JSONP原理及简单实现
Jun 08 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
vue使用nprogress实现进度条
Dec 09 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 全局变量范围分析
2009/08/07 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
Python使用django搭建web开发环境
2017/06/09 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
django用户登录和注销的实现方法
2018/07/16 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
省级青年文明号申报材料
2014/05/23 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
村党建工作汇报材料
2014/11/02 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers