小程序实现列表点赞功能


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 相关文章推荐
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
vue 全局环境切换问题
Oct 27 Javascript
React forwardRef的使用方法及注意点
Jun 13 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获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python正则表达式匹配中文用法示例
2017/01/17 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
本科毕业生的求职信范文
2013/11/20 职场文书
九年级物理教学反思
2014/01/29 职场文书
电气工程自动化求职信
2014/03/14 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
教师自查自纠材料
2014/10/14 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
SpringBoot详解执行过程
2022/07/15 Java/Android