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


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 冒号 使用说明
Jun 06 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
微信小程序canvas动态时钟
Oct 22 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
浅谈js中的闭包
2015/03/16 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
利用python画一颗心的方法示例
2017/01/31 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 网络编程详解及简单实例
2017/04/25 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python中count函数简单用法
2020/01/05 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python实现画图软件功能方法详解
2020/07/28 Python
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
考试没考好检讨书(精选篇)
2014/11/16 职场文书
销售合作意向书范本
2015/05/08 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Python3 如何开启自带http服务
2021/05/18 Python
Go语言基础map用法及示例详解
2021/11/17 Golang