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


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 相关文章推荐
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript函数详解
2014/11/17 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
轮播的简单实现方法
2016/07/28 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
详解jquery和vue对比
2019/04/16 jQuery
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
给客户的道歉信
2014/01/13 职场文书
安全施工标语
2014/06/07 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python