小程序实现列表点赞功能


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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
详解python中的json和字典dict
2018/06/22 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Python学习之os模块及用法
2020/06/03 Python
基于python实现操作git过程代码解析
2020/07/27 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
毕业生求职的求职信
2013/12/05 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
MySQL优化及索引解析
2022/03/17 MySQL