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


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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
微信开发 微信授权详解
Oct 21 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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 中的类
2006/10/09 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
PHP经典面试题
2016/09/03 面试题
银行优秀员工事迹
2014/02/06 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
财务经理岗位职责
2015/01/31 职场文书
走近毛泽东观后感
2015/06/04 职场文书