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


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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
Highcharts入门之简介
Aug 02 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
Vuex实现购物车小功能
Aug 17 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP模板解析类实例
2015/07/09 PHP
Symfony核心类概述
2016/03/17 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
YII框架常用技巧总结
2019/04/27 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python中pop()函数的语法与实例
2020/12/01 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
商场经理竞聘演讲稿
2014/01/01 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
机关会计岗位职责
2014/04/08 职场文书
检讨书范文大全
2015/05/07 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python