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


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 相关文章推荐
用于table内容排序
Jul 21 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
webstorm中vue语法的支持详解
May 09 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+java实现自动新闻滚动窗口
2006/10/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python生成随机mac地址的方法
2015/03/16 Python
python入门教程之识别验证码
2017/03/04 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
酒店副总岗位职责
2013/12/24 职场文书
高一生物教学反思
2014/01/17 职场文书
文明寄语大全
2014/04/11 职场文书
大学社团计划书
2014/05/01 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python