小程序实现列表点赞功能


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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JavaScript中的闭包
Feb 24 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
用python读写excel的方法
2014/11/18 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
python3实现简单飞机大战
2020/11/29 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
忠诚奉献演讲稿
2014/09/12 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang