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


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 相关文章推荐
JS获取地址栏参数的小例子
Aug 23 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
浅析js实现网页截图的两种方式
Nov 01 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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学习笔记之 函数声明
2011/06/09 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
yii2安装详细流程
2018/05/23 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
项目经理岗位职责
2013/11/11 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
商业计划书格式、范文
2019/03/21 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
python编程项目中线上问题排查与解决
2021/11/01 Python