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


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变强势
Jun 22 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
深入了解JavaScript 私有化
May 30 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
JavaScript实例 ODO List分析
Jan 22 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
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
js实现选项卡效果
2020/03/07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python性能优化技巧
2015/03/09 Python
介绍Python中的文档测试模块
2015/04/28 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python set内置函数的具体使用
2019/07/02 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
六道php面试题附答案
2014/06/05 面试题
三个儿子教学反思
2014/02/03 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2017春节晚会开幕词
2016/03/03 职场文书