微信小程序实现列表页的点赞和取消点赞功能

2024-09-27 13:28:51

今天开发了一个文章的留言版块，于是想到要为某个留言点赞，点过赞的再次点击会取消点赞，代码如下：

/*更新点赞*/
 update_zan:function(e){
  var that = this;
  var data = e.currentTarget.dataset;
  var mid = data.mid;
  var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid
  var isadd = 1;
  var newmessage = [];
  if (cookie_mid.includes(mid)){//说明已经点过赞,取消赞
   isadd = 0;
   var m = 0;
   for (var j in cookie_mid){
    if(cookie_mid[j] != mid){
     newmessage[m] = cookie_mid[j];
     m++
    }
   }
   wx.setStorageSync('zan', newmessage);//删除取消赞的mid
  }else{
   cookie_mid.unshift(mid);
   wx.setStorageSync('zan', cookie_mid);//新增赞的mid
  }
  wx.request({
   url: app.globalData.api.api_system,
   data: {
    action: 'zannum',
    mid: mid,
    isadd: isadd,
    wxid: app.globalData.wxid
   },
   method: 'GET',
   // header: {},
   success: function (res) {
    var message = that.data.message;
    for (var i in message) {
     if(message[i].mid == mid){
      if(isadd){
       message[i].zan = parseInt(message[i].zan) + 1
      }else{
       message[i].zan = parseInt(message[i].zan) - 1
      } 

     }
    }
    that.setData({
     message: message
    })
   }
  })

重点注意代码：

（1）要把所有已经点过赞的留言id给存储到本地缓存之中，这样如果重复点赞的，就可以判断出来，并取消点赞，取消点赞的同时要去掉缓存中的id；
（2）新增点赞和取消点赞用到同一个api，通过isadd=1或者isadd=0来判断是新增还是取消点赞
（3）为了不频繁去读取留言列表，可以直接调用this.data.message,并通过循环遍历改变某个留言的点赞数，然后直接重新赋值，就能动态改变点赞数！

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

微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind
微信小程序实现点赞、取消点赞功能

最近接触到小程序,发现很有意思,在项目中遇到了一点小问题,就是点赞+取消点赞有些冲突,还有就是多项的点击,话不多说咱们直接上代码! 效果图 wxml <block wx:for="{{msg}}"> <image class='imgList' hidden='{{item.show}}' bindtap='zan' data-index='{{index}}' src='../resizeApi.png'></image> <image cl
小程序实现列表点赞功能

最近在开发一个小程序,想添加一个点赞功能,那到底怎么实现呢?因为要和后台服务器同步数据,所以这个我想了好几天应该怎么实现点赞和取消点赞的逻辑,经过两天的实践调试,最终实现了. 思路如下: 1.找到对应文章列表的id (我用的是 wx:for 列表渲染加 template 模板来实现文章列表的,所以如果没找到对应的 id ,点赞时可能会出现点击一个列表,别的列表也会发生变化的事件) 2.在前端利用 wx.setStorageSync 保存对应的列表点赞的 id 的缓存后面通过缓存判断该文章是否
微信小程序项目总结之点赞删除列表分享功能

小程序点赞功能思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表判断点击的id 2.如果id相同判断是否点赞过如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con
微信小程序小组件基于Canvas实现直播点赞气泡效果

先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: drawImage:function(data){[/align] var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐标值*/ var p12= data[0][2]; /* 三阶贝塞尔曲线第二个控制点坐标值*/ var p13= data[0][3]; /* 三阶贝塞尔曲线终点坐标值*/ var
小程序点赞收藏功能的实现代码示例

本文介绍了小程序点赞收藏功能的实现代码示例,分享给大家,具体如下: /收藏/ focusFavoriteTab: function (e) { var that = this; var isFocus = that.data.isFocus; console.log("isFocus", isFocus) var itemId = that.data.itemId; if (isFocus) { favoriteService.cancel(that, itemId).then((re
微信小程序实现列表项滑动显示删除按钮的功能

微信小程序实现列表项滑动显示删除按钮的功能微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.
微信小程序实现列表页的点赞和取消点赞功能

今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; var data = e.currentTarget.dataset; var mid = data.mid; var cookie_mid = wx.getStorageSync('zan') || [];//获取全部点赞的mid var isadd = 1; var newmessage = [];
微信小程序新闻网站详情页实例代码

准备工作: 1.在微信公众号平台,申请小程序账号,获取appid 2.下载并安装微信开发者工具 3.做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换首先是项目的入口页面 welcome.wxml <view class="container"> <image class="avatar" src="/images/avatar/1.png"
微信小程序实现列表的横向滑动方式

微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:
微信小程序虚拟列表的应用实例

目录前言什么是虚拟列表? demo效果准备工作屏高&盒子高度优化总结前言股票热门榜单有4000多条,渲染到页面上在盘中时还得实时更新,如果采用接口和分页,当下拉几十页的时候页面会变的越来越卡并且还得实时更新,最后的做法是一开始数据就从ws传递过来,我们只需要传起始下标和结束下标即可,在页面上我们也只生成几个标签.大大减轻了渲染压力. 什么是虚拟列表? 就只指渲染可视区域内的标签,在滚动的时候不断切换起始和结束的下标来更新视图,同时计算偏移. demo效果准备工作计算一屏可展示
微信小程序新建登录页并实现tabBar隐藏

微信小程序新建登录页并实现tabBar隐藏实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设
微信小程序商品详情页规格属性选择示例代码

detail.wxml展示页面  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &
微信小程序外卖选购页实现切换分类与数量加减功能案例

本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能.分享给大家供大家参考,具体如下: 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤: 效果图实现以下功能一. 点击分类项,切换右边的食品,并高亮自身这个实现比较简单,给一个states数组,用于记录每一项分类的状态,点击设为true,wxml渲染时三目运算判断即可. categoryStates = categoryStates.map(function (item, i) { if (index == i) { i
微信小程序wxml列表渲染原理解析

这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{
微信小程序多列表渲染数据开关互不影响的实现

最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家  <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

微信小程序实现列表页的点赞和取消点赞功能

相关推荐

随机推荐