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


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圆角插件 Corner速成
Aug 31 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
js模拟实现烟花特效
Mar 10 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/05/16 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
python基础教程之类class定义使用方法
2014/02/20 Python
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
职位说明书范文
2014/05/07 职场文书
中国梦口号
2014/06/13 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
毕业证委托书范文
2014/09/26 职场文书
小学教育见习报告
2014/10/31 职场文书
美丽的大脚观后感
2015/06/03 职场文书
在职证明书模板
2015/06/15 职场文书
学习经验交流会策划书
2015/11/02 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers