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


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 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
js 对象是否存在判断
Jul 15 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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
COM in PHP (winows only)
2006/10/09 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python如何发布程序的详细教程
2018/10/09 Python
在python中实现对list求和及求积
2018/11/14 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
UML设计模式笔试题
2014/06/07 面试题
电信专业应届生自荐信
2013/09/28 职场文书
积极分子思想汇报
2014/01/04 职场文书
公司企业表扬信
2014/01/11 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书