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


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函数
Oct 16 Javascript
js DOM模型操作
Dec 28 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
微信小程序如何实现全局重新加载
Jun 05 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+xml编程之xpath的应用实例
2015/01/24 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
纯php生成随机密码
2015/10/30 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python数据结构之翻转链表
2017/02/25 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
简单了解Python write writelines区别
2020/02/27 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
小区门卫值班制度
2014/01/24 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
单位委托书
2014/10/15 职场文书
会议邀请函
2015/01/30 职场文书
理想国读书笔记
2015/06/25 职场文书