小程序实现列表点赞功能

 更新时间:2018年11月02日 14:40:58   作者:LiXiuu  
这篇文章主要为大家详细介绍了小程序实现列表点赞功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了。

思路如下:

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博客的这篇文章

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • window.onload绑定多个事件的两种解决方案

    window.onload绑定多个事件的两种解决方案

    这篇文章主要介绍了window.onload绑定多个事件的两种解决方案的相关资料,需要的朋友可以参考下
    2016-05-05
  • 原生JS实现图片跑马灯特效

    原生JS实现图片跑马灯特效

    这篇文章主要为大家详细介绍了原生JS实现图片跑马灯特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JS 图片压缩原理与实现方法详解

    JS 图片压缩原理与实现方法详解

    这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解)

    下面小编就为大家介绍一下JavaScript中的字符串的match与replace方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Echarts横向堆叠柱状图和markLine实例详解

    Echarts横向堆叠柱状图和markLine实例详解

    一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,所以应该将柱形图堆叠起来,这样就会好很多,下面这篇文章主要给大家介绍了关于Echarts横向堆叠柱状图和markLine的相关资料,需要的朋友可以参考下
    2022-06-06
  • javascript发表评论或者留言时的展开效果

    javascript发表评论或者留言时的展开效果

    javascript发表评论或者留言时的展开效果...
    2007-07-07
  • JavaScript实现省份城市的三级联动

    JavaScript实现省份城市的三级联动

    这篇文章主要为大家详细介绍了JavaScript实现省份城市的三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 前端echarts加标记点及标记线和提示框详细代码示例

    前端echarts加标记点及标记线和提示框详细代码示例

    ECharts中的标记线是一条平行于x轴的水平线,有最大值、最小值、平均值等数据的标记线,它也是在series字段下进行配置的,下面这篇文章主要给大家介绍了关于前端echarts加标记点及标记线和提示框的相关资料,需要的朋友可以参考下
    2024-06-06
  • 使用Web Component实现防篡改水印

    使用Web Component实现防篡改水印

    Web Component内部有钩子天然支持被篡改时被触发,用来防篡改非常方便,所以本文就将使用Web Component实现防篡改水印,感兴趣的小伙伴可以了解下
    2023-12-12
  • JavaScript实现图片放大镜效果

    JavaScript实现图片放大镜效果

    这篇文章主要为大家详细介绍了JavaScript实现图片放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论