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


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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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 上传功能实例代码
2010/04/13 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
类似框架的js代码
2006/11/09 Javascript
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
PHP中如何使用Cookie
2015/10/28 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
《满井游记》教学反思
2014/02/26 职场文书
安全月活动总结
2014/05/05 职场文书
外贸业务员求职信
2014/06/16 职场文书
班级读书活动总结
2014/06/30 职场文书
班主任经验交流材料
2014/12/16 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
追讨欠款律师函
2015/06/24 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js