uniapp列表点赞缓存数据

默认

在默认状态下显示数据列表有点赞数量

点击

用户点赞后数量增加和标记已点赞状态

缓存

储存已点赞信息的id值

template

<template>
    <view class="container">
		<view class="list" v-for="(item,index) in list">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="praise">{{item.praise}}</view>
				<view class="heart"
				:class="item.hasChange? 'like': ''"
				hover-class="hover_praise" 
				@tap="praiseThis" 
				:data-curIndex="index"
				:data-id="item.id"
				></view>
			</view>
		</view>
	</view>
</template>

script

import cache from '../../common/cache.js';
var _self;
export default{
	
	data(){
		return{
			list : [
				{
				  'id':'101',
			      'title': '小兔崽子',
			      'praise': 5,
			      'hasChange': false
			    },
			    {
				  'id':'102',
			      'title': '小兔崽子',
			      'praise': 2,
			      'hasChange': false
			    },
			    {
				  'id':'103',
			      'title': '小兔崽子',
			      'praise': 0,
			      'hasChange': false
			    },
			    {
				  'id':'104',
			      'title': '小兔崽子',
			      'praise': 13,
			      'hasChange': false
			    },
			    {
				  'id':'105',
			      'title': '小兔崽子',
			      'praise': 14,
			      'hasChange': false
			    },
			],		
			
			commentData:[],
			
		}
	},
	onLoad() {
		_self = this;
		var list = _self.list;
		
	},
	onShow(){
		//读取缓存
		var commentRedis = cache.getCache("commentData");
		
		//改变已选中状态和数量
		var commentData = this.list;
		commentData.forEach((item,key) => {
			var id = item.id;
			
			if(commentRedis.indexOf(item.id)!=-1){
				this.list[key].hasChange = true;
				this.list[key].praise = this.list[key].praise + 1;
			}
		
		});
	},
	methods:{
		praiseThis: function (e) {
			//获取键
			var index = e.currentTarget.dataset.curindex;
			
			//获取信息id
			var id = e.currentTarget.dataset.id;
			
			
			var commentData = cache.getCache("commentData");
			
			if(this.list[index]){
				var hasChange = this.list[index].hasChange;
				if(hasChange !== undefined){
					var onum = this.list[index].praise;
					
					if(hasChange){
						//取消点赞
						this.list[index].praise = (onum - 1);
						this.list[index].hasChange = false;
						//操作缓存
						if(commentData){
							
							var result = commentData.indexOf(id);
							//如果存在移除缓存中的id
							if(result>=0){
								var commentData = cache.getCache("commentData");
								var index = commentData.findIndex(item => {
									if (item == id) {
										return true
								    }
									
								});
								commentData.splice(index,1);
								
								cache.setCache("commentData",commentData);
							}
							if(result==-1){
								
							}
						}
					}else{
						//点赞
						this.list[index].praise = (onum + 1);
						this.list[index].hasChange = true;
						
						if(commentData){
							var result = commentData.indexOf(id);
							if(result==0){
								return false;
							}
							//如果不存在添加到缓存中
							if(result==-1){
								var commentData = cache.getCache("commentData");
								commentData.push(id);
								cache.setCache("commentData",commentData);
							}
							
						}
						if(!commentData){
							var data = [id];
							cache.setCache("commentData",data);
						}
						
						
					}
					
				}
				
			}
			
			
			
		}
	}
}

style

.container {
  background: #fff;
  height: 100%;
  font-family: 'Miscrsoft YaHei';
  padding: 50upx 0;
}
.list {
  background: #fff;
  position: relative;
  height: 50px;

  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  padding: 0 20upx;
}
.title{
	color: #2EB3FF;
}
.info{
	display: flex;
	justify-content: flex-start;
}
.praise {
  transition: 0.5s;
}
.hover_praise, .like {
  transition: 0.5s;
}
.heart{
    /*设置弹性布局*/
	display: flex;
	margin: 10upx 0;
	width: 40upx;
	height: 30upx; 
    /*通过过滤器设置元素内阴影样式*/
	filter: drop-shadow(0 1upx 1upx #d9d9da);
    /*设置元素动画效果*/
	animation: breath 2s ease infinite;
}
.heart::before,
.heart::after{
	content: '';
	/*创建的两个伪元素各占一份*/
	flex: 1;
	height: 30upx;
    /*设置边框四个角的大小 顺序是：上、右、下、左*/
	border-radius: 20upx 20upx 4upx 4upx;
    /*设置图形变形（旋转、拉伸等）的原点*/
	transform-origin: 50% 6upx;
	background-color: #d9d9da;
}
.heart.like::before,
.heart.like::after{
	background: red;
	filter: drop-shadow(0 1upx 1upx #973340a3);
}
.heart::before{
    /*元素根据设置的原点逆时针旋转45度*/
	transform: rotate(-45deg);
}
.heart::after{
    /*元素根据设置的原点顺时针旋转45度*/
	transform: rotate(45deg);
}