小程序实现列表点赞功能


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实现ASP分页函数 HTML分页函数
Sep 22 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
AngularJS 中的数据源的循环输出
Oct 12 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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
当海贼王变成JOJO风
2020/03/02 日漫
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
最新党员思想汇报
2014/01/01 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
个人贷款担保书
2014/04/01 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
公司经营目标责任书
2015/01/29 职场文书
法定代表人身份证明书
2015/06/18 职场文书
文明上网主题班会
2015/08/14 职场文书