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


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里使用Dom操作Xml
Jan 22 Javascript
围观tangram js库
Dec 28 Javascript
jquery isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
angularjs模态框的使用代码实例
Dec 20 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
PHPlet在Windows下的安装
2006/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
浅谈python函数之作用域(python3.5)
2017/10/27 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
django项目搭建与Session使用详解
2018/10/10 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
部门2014年度工作总结
2014/11/12 职场文书
公务员政审材料
2014/12/23 职场文书
功夫熊猫观后感
2015/06/10 职场文书
运动会报道稿大全
2015/07/23 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏