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


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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Javascript查看大图功能代码实现
May 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
微信小程序实现轮播图效果
2017/09/07 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
详解python中的线程与线程池
2019/05/10 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
工程师求职简历的自我评价分享
2013/10/10 职场文书
电子信息毕业生自荐信
2013/11/16 职场文书
司马光教学反思
2014/02/01 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
施工协议书范本
2014/04/22 职场文书
司机岗位职责说明书
2014/07/29 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
介绍信格式
2015/01/30 职场文书
死亡诗社观后感
2015/06/05 职场文书
高老头读书笔记
2015/06/30 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
小程序实现侧滑删除功能
2022/06/25 Javascript