微信小程序项目总结之点赞 删除列表 分享功能


Posted in Javascript onJune 25, 2018

小程序点赞功能

微信小程序项目总结之点赞 删除列表 分享功能

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

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' 
 } 
 } 
})

总结

以上所述是小编给大家介绍的微信小程序项目总结之点赞 删除列表 分享功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js实现常用排序算法
Aug 09 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
vue.js开发环境搭建教程
May 04 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 #Javascript
浅谈super-vuex使用体验
Jun 25 #Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 #Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 #Javascript
JS实现仿微信支付弹窗功能
Jun 25 #Javascript
vue.js 实现输入框动态添加功能
Jun 25 #Javascript
You might like
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
vue实现拖拽效果
2019/12/23 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python编写实现抽奖器
2020/09/10 Python
python 如何实现遗传算法
2020/09/22 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
应届生英语教师求职信
2013/11/05 职场文书
应用英语专业自荐信
2014/01/26 职场文书
婚纱店策划方案
2014/05/22 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
生物科学专业自荐书
2014/06/20 职场文书
励志演讲稿200字
2014/08/21 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
商场营业员岗位职责
2015/04/14 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python