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


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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
javascript基本语法分析说明
2008/06/15 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
对python中的for循环和range内置函数详解
2018/04/17 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
python将unicode和str互相转化的实现
2020/05/11 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python打开文件的方式有哪些
2020/06/29 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
培训主管的岗位职责
2013/11/23 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
《忆江南》教学反思
2014/04/07 职场文书
募捐倡议书
2014/04/14 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
关于五一放假的通知
2015/08/18 职场文书
怎样写好工作计划
2019/04/10 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
Python中time标准库的使用教程
2022/04/13 Python