微信小程序实现点赞业务


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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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
php+dbfile开发小型留言本
2006/10/09 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
移动端界面的适配
2017/01/11 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue 优化CDN加速的方法示例
2018/09/19 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python中的格式化输出用法总结
2016/07/28 Python
python解决字符串倒序输出的问题
2018/06/25 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
师范毕业生自荐信
2013/10/17 职场文书
个人贷款担保书
2014/04/01 职场文书
怀念母亲教学反思
2014/04/28 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android