微信小程序实现点赞业务


Posted in Javascript onFebruary 10, 2021

本文实例为大家分享了微信小程序实现点赞业务的具体代码,供大家参考,具体内容如下

一、效果

微信小程序实现点赞业务

二、实现

1.逻辑

1.从登录界面时,用户数据已经缓存到本地,在onload中从本地获取用户信息保存在data.userInfo中
2.判断用户的_openid是否在loveList返回的列表中,如果是取消赞,如果不是点赞加入昵称到loveList中
3.下面用的是nickName判断,后期优化成使用_openid判断

微信小程序实现点赞业务

微信小程序实现点赞业务

微信小程序实现点赞业务

微信小程序实现点赞业务

2.wxml

<!-- 
 wx:index = "index":列表循环后所有位置都可以访问索引
 -->
<view class="item" wx:for="{{list}}" wx:index = "index">
 <view class="left">
 <image class="avatar"></image>
 </view>
 <view class="right">
 <view class="nickname">{{item.nickName}}</view>
 <view class="content">{{item.content}}</view>
 <view class="image-list">
  <image class="image" wx:for="{{item.imageList}}"></image>
 </view>
 <view class="time-area">
  <view class="time">{{item.time}}</view>
  <view>
  <!--
   data-index="{{index}}"
   1.设置后在回调函数中currentTarget.dataset中显示
   -->
  <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
  <!-- 判断当前索引和面盘索引是否一致 -->
  <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
   <!-- 设置索引和点击函数 -->
   <view class="tab" catchtap="clickLove" data-index="{{index}}">
   <image class="image" src="../../images/love-white.png"></image>
   <text>赞</text>
   </view>
   <view class="tab">
   <image class="image" src="../../images/comment-white.png"></image>
   <text>评论</text>
   </view>
  </view>
  </view>
  
 </view>
 <view class="love-comment">
  <!-- 
  item.loveList=重复
  item.loveList
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <text class="love-nickname" wx:for="{{item.loveList}}">老夫子 兰陵王</text>
  </view>
  -->
  <view class="love" wx:if="{{item.loveList.length > 0}}">
  <image class="love-icon" src="../../images/love-blue.png"></image>
  <!-- love和整个循环的item不冲突 -->
  <text class="love-nickname" wx:for-items="{{item.loveList}}"
  wx:for-item = "love"
  >{{love.nickName}}</text>
  </view>
  <view class="comment" wx:if="{{item.commentList.length > 0}}">
  <view wx:for-items="{{item.commentList}}"
  wx:for-item = "comment">
   <text class="comment-nickname">{{comment.nickName}}</text>
   <text class="comment-content">{{comment.content}}</text>
  </view>
  </view>
 </view>
 </view>
</view>

3.js

// pages/circle/list.js
var that;
Page({

 /**
 * 页面的初始数据
 */
 data: {
 userInfo:null,
 list:[],
 // 当前点击操作面板的索引,每条朋友圈一个面板
 showOperationPannelIndex:-1,
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 that = this;
 for (var i = 1; i < 10; i++) {
  // 定义一个对象存储数据
  var circleData = {};
  circleData.nickName = "朋友-" + i;
  circleData.content = "朋友发布内容-" + i;
  circleData.time = "2020-05-0" + i;

  //图片列表
  var imageList = [];
  // 点赞列表
  var loveList = [];
  // 评论列表
  var commentList = [];


  // 这三个数组赋值给circleData
  circleData.imageList = imageList;
  circleData.loveList = loveList;
  circleData.commentList = commentList;

  // 给3个数组赋值
  for (var j = 1; j < i; j++) {
  // 图片路径,占位
  imageList.push(j);
  // loveList,定义loveData对象
  var loveData = {};
  loveData.nickName = '点赞-' + j;
  // 点赞数组加入loveList
  loveList.push(loveData);

  // 评论数据
  var commentData = {};
  commentData.nickName = "兰陵王-" + j + ":";
  commentData.content = "评论内容-" + j;
  // 加入数据
  commentList.push(commentData);
  }

  that.data.list.push(circleData);
 }
 // 重新渲染
 that.setData({
  list: that.data.list
 })
 //获取用户信息
 wx.getStorage({
  key: 'userInfo',
  success(res){
  //转换成对象
  console.log("getStorage success:",JSON.parse(res.data));
  that.setData({
   userInfo:JSON.parse(res.data)
  })
  }
 })
 },
 //控制操作面板展示
 showOperationPannel(e){
 console.log("showOperationPannel",e);
 // 获取点击的索引
 var index = e.currentTarget.dataset.index;
 // 如果正在展示,则关闭
 if(that.data.showOperationPannelIndex == index){
  that.setData({
  // 索引从0开始
  showOperationPannelIndex:-1
  })
 }
 else{
  that.setData({
  // 设置成当前点击的索引
  showOperationPannelIndex:index
  })
 }
 
 },
 // 点赞功能
 clickLove(e){
 console.log(e);
 var index = e.currentTarget.dataset.index;
 // 将这条数据取出
 var circleData = that.data.list[index];
 var loveList = circleData.loveList;
 var isHaveLove = false;
 for(var i = 0; i < loveList.length; i++){
  if(that.data.userInfo.nickName == loveList[i].nickName){
  isHaveLove = true;
  // 移除点赞
  loveList.splice(i,1);
  break;
  }
 }

 if(!isHaveLove){
  loveList.push({nickName:that.data.userInfo.nickName});
 }
 that.setData({
  list:that.data.list,
  // 关闭点赞评论面板
  showOperationPannelIndex:-1
 })

 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
在js中修改html body的样式
Nov 11 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 #Javascript
javascript实现简单留言板案例
Feb 09 #Javascript
javascript实现下拉菜单效果
Feb 09 #Javascript
用javascript实现倒计时效果
Feb 09 #Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
You might like
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
基于Pytorch SSD模型分析
2020/02/18 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python 决策树算法的实现
2020/10/09 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
竞争上岗演讲稿
2014/01/05 职场文书
大学生先进事迹材料
2014/02/16 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
安全责任书
2015/01/29 职场文书
初中数学教学随笔
2015/08/15 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
MySQL分区以及建索引的方法总结
2022/04/13 MySQL