iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >微信小程序项目中如何实现点赞、删除列表、分享功能
  • 370
分享到

微信小程序项目中如何实现点赞、删除列表、分享功能

2024-04-02 19:04:59 370人浏览 安东尼
摘要

这篇文章给大家分享的是有关微信小程序项目中如何实现点赞、删除列表、分享功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。小程序点赞功能思路:在后台没有给你接口自己模拟数据data

这篇文章给大家分享的是有关微信小程序项目中如何实现点赞、删除列表、分享功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

小程序点赞功能

微信小程序项目中如何实现点赞、删除列表、分享功能

思路:在后台没有给你接口自己模拟数据

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){ 
  console.log(item.id + e.currentTarget.dataset.id ) 
  if(item.likes.iszan){ 
   var obj = {} 
   obj.iszan = !item.likes.iszan; 
   obj.num = item.likes.num -1 ; 
   return Object.assign({},item,{likes:obj}) 
  }else { 
   var obj = {} 
   obj.iszan = !item.likes.iszan; 
   obj.num = item.likes.num + 1; 
   return Object.assign({}, item, { likes: obj }) 
  } 
  }else { 
  return item 
  } 
 }) 
 this.setData ({ 
  release:newData 
 }) 
 },

       2.点击删除列表功能

微信小程序项目中如何实现点赞、删除列表、分享功能

微信小程序项目中如何实现点赞、删除列表、分享功能

1.给撤销按钮绑定id 添加点击事件

2.点击删除按钮时提示是否删除

3.如果用户点击确定 获取到要删除的id

4.删除对应的数组内容

5.更新数据

//删除评论 
 binddelete:function(e){ 
 var that = this; 
 wx.showModal({ 
  title: '提示', 
  content: '确认撤回吗?', 
 success:function(res){ 
  if(res.confirm){ 
 console.log('用户点击确定') 
 // 获取要删除数据的id 
 var dataid = e.currentTarget.dataset.id; 
 console.log(dataid) 
 // 删除数组对应的数据内容 
 var release = that.data.release; 
 that.data.release.splice(dataid,1) 
 //判断数据的长度 
 var len = that.data.release.length; 
 //通过判断数组的长度来决定是否显示隐藏的部分 
  that.setData ({ 
  release: that.data.release 
  }) 
  }else if(res.cancel){ 
  console.log('用户点击取消') 
  } 
 } 
 }) 
 },

3.点击分享

微信小程序项目中如何实现点赞、删除列表、分享功能

点击分享按钮 要给button按钮绑定个 open-type ="share"属性

通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage() 事件,如果当前页面没有定义此事件,则点击后无效果。

Page({ 
 onShareAppMessage: function (res) { 
 if (res.from === 'button') { 
 // 来自页面内转发按钮 
 console.log(res.target) 
 } 
 return { 
 title: '自定义转发标题', 
 path: '/page/user?id=123' 
 } 
 } 
})

感谢各位的阅读!关于“微信小程序项目中如何实现点赞、删除列表、分享功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 微信小程序项目中如何实现点赞、删除列表、分享功能

本文链接: https://www.lsjlt.com/news/70782.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序项目中如何实现点赞、删除列表、分享功能
    这篇文章给大家分享的是有关微信小程序项目中如何实现点赞、删除列表、分享功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。小程序点赞功能思路:在后台没有给你接口自己模拟数据data...
    99+
    2022-10-19
  • 微信小程序项目中如何实现记账小程序功能
    这篇文章主要介绍微信小程序项目中如何实现记账小程序功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、小程序部分这是理财系统的前端,江苏海洋大学微信小程序比赛,最后获得了一等奖Gi...
    99+
    2022-10-19
  • 微信小程序如何实现向左滑动删除功能
    这篇文章将为大家详细讲解有关微信小程序如何实现向左滑动删除功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 向左滑动删除功能的实现实现效果图:实现代码:1、w...
    99+
    2022-10-19
  • 微信小程序中如何实现按钮去除边框线分享页面功能
    小编给大家分享一下微信小程序中如何实现按钮去除边框线分享页面功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!有一个需求是分享当...
    99+
    2022-10-19
  • 如何使用PHP实现微信小程序的文件分享功能?
    如何使用PHP实现微信小程序的文件分享功能?随着微信小程序的普及,文件分享功能成为了很多小程序开发者的需求之一。本文将介绍如何使用PHP实现微信小程序的文件分享功能,并提供具体的代码示例。一、准备工作在实现文件分享功能之前,我们需要完成以下...
    99+
    2023-10-27
    PHP 微信小程序 文件分享
  • 微信小程序如何实现基于Taro的分享图片功能
    小编给大家分享一下微信小程序如何实现基于Taro的分享图片功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!Taro支持以React语言开发小程序,支持CSS预处理器,支持实时编译更新,支...
    99+
    2022-10-19
  • 微信小程序中如何实现多列表的显示和隐藏功能
    这篇文章将为大家详细讲解有关微信小程序中如何实现多列表的显示和隐藏功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:实现思路:实现单个列表的显示和隐藏应该使用唯一...
    99+
    2022-10-19
  • 微信小程序如何实现列表上拉加载下拉刷新功能
    这篇文章给大家分享的是有关微信小程序如何实现列表上拉加载下拉刷新功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.列表(本部分内容出入官方文档)对于这个功能,微信小程序中并没...
    99+
    2022-10-19
  • 微信小程序如何实现商品列表跳转商品详情页功能
    目录引言1.1实现首页页面2.1实现调跳转到手机详情页总结引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标首页显示两行文字,多余的文字隐藏,...
    99+
    2022-11-13
  • 微信小程序如何实现通过保存图片分享到朋友圈功能
    这篇文章给大家分享的是有关微信小程序如何实现通过保存图片分享到朋友圈功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。说明首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能...
    99+
    2022-10-19
  • 如何在微信小程序中实现一个手动埋点和自动埋点功能
    如何在微信小程序中实现一个手动埋点和自动埋点功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、手动埋点手动埋点就是在每一处需要的地方,都加一段上报埋点的代码。影响代码的...
    99+
    2023-06-06
  • 微信小程序实战中位置闹铃如何实现监控点状态迁移功能
    这篇文章给大家介绍微信小程序实战中位置闹铃如何实现监控点状态迁移功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。接近监控点enterAlarmCheck: function (distance, accuracy){...
    99+
    2023-06-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作