uniapp 评论列表，展开，收起，全部，局部刷新功能

分析，

首先得判断字符长度，超过一定长度后才有展开收起的功能，需要有一个字段标识，
要控制每一条的展开收起，必须在每一条中添加一个相关字段，
我们分析完后，需要在原数组上添加两个字段
第一个： 是否超过三行（或者四行），isMore
第二个： 当前状态是展开还是收起，isAll
  • 其实这里的看起来就是数据双向绑定，但是实现原理不是，
  • 最关键的是拷贝数据，重新赋值，这里绕过数据双向绑定，利用了缓存，当我们第一次渲染数据的时候就会生成dom缓存，当我们改变json数据中的某个数据的时候，这里牛逼的就是diff算法了，他只会 替换变化的节点，看似我们重新赋值了，但不会刷新页面
如果这个搞懂了，可以做很多东西。比如选择日期，选择游客，选择地址…

效果如下
在这里插入图片描述

下面是所有代码

<template>
	<view class="container">
		<!--  评价 -->
		<view class="evaluate"> 
			<view class="evaluateCenter">  
				<view class="evaluateItem" v-for="(item, index) in list" :key="index">
					<view class="evaluateTip dfsb">
						<view class="img"><image :src="item.image" mode="widthFix"></image></view>
						<view class="right">
							<view class="righttip">{{ item.name}}</view>
							<view class="bottom dfsb">
								<view class="star">
									<text>4.5分</text> 
									<uni-rate size='12' activeColor='#fd9130' :is-fill="false" readonly disabledColor='' allow-half :value="item.score|| 3.5" /> 
								</view>	
								<view class="time">{{item.time}}</view>
							</view>
						</view>
					</view>
					<view class="evaluateText" :class="{lineclamp3:item.contentAll}"> {{item.content}} </view>
					<view class="" v-if="item.isMore">						
						<view class="rightText" v-if="item.contentAll" @click="changeAllFun(item, index)">全部</view>
						<view class="rightText" v-else  @click="changeAllFun(item, index)">收起</view>
					</view>
					<view class="evaluateListImg"> 
						<view class="evaluateListImgItem " v-for="(itm, ind) in item.imageList" :key="ind">	
							<image :src="itm.url" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="bottomImg">
						<image src="/static/ticket/huanleguSamll.png" mode="scaleToFill"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name:"evaluateList",
	data() {
		return {
			list:[
					{	
						name: '马保国',
						title: '耗子为汁',
						image: 'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01ec0ba02a9.jpg',
						score: 4.5,
						time: '2021.06.06',
						content: '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
						imageList:[
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
						]
					},
					{	
						name:'留念&伤感1999',
						title: '恋曲1999',
						image:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e01f3cb402aa.jpg', 
						score:4.5,
						time:'2021.06.06',
						content:'服务好服务好服务好服务好，景色好，山河锦绣，树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛树木茂盛，空气清新，鸟语花香，人杰地灵',
						imageList:[
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
							{ url:'https://slzh-oss.oss-cn-beijing.aliyuncs.com/usercenter/template/2c94809a787cec070179e0234e7902ab.png' },
						]
					},
				]
			};
		},
		created() {
			this.getlist()
		},
		onLoad() {
			this.getlist()
		},
		methods:{
			getlist(){
				this.list.forEach(item=>{
					if(item.content.length > 60){
						item.isMore = true
						item.contentAll = true
					}else{
						item.isMore = false
						item.contentAll = false
					}
				})
			},
			changeAllFun(item, index){
				let list = JSON.parse(JSON.stringify(this.list));	
				list.forEach((elem,ind)=>{
					if(index === ind){
						elem.contentAll = !elem.contentAll
					} 
				})
				this.list  =  list 
			}
		}
		
}
</script>

<style lang="scss" scoped>

.container {
  width: 100vw;
  font-size:12px;
  min-height: 100vh; 
  display: inline-block;
  color: #1d1d1d;
  position: relative;
  background:#F1F1F1;
}
// 游客评价
.evaluate .evaluateCenter .evaluateItem{
	display: inline-block;
}
.rightText{
	color: #4399FC;
	text-align: right;
}
.evaluate{
	.tip{
		padding: 15px;
		.left{
			font-size: 14px;
			font-weight: 500;
			color: #0c1317;
		}
		.right{
			color: #0f9efa;font-weight: bold;
			image{
				margin-left: 6px;
				width: 16px;
				height: 16px;
			}
		}
	}
	.evaluateCenter{
		overflow-x: auto;
		.evaluateItem{
			background-color: #FFFFFF;
			padding: 15px;
			border-radius: 10px; 
			margin:  10px 15px 0 15px;
			.evaluateTip{
				.img{
					width: 42px;
					height: 42px; 
					display: table;
					image{
						border-radius: 50%;
					}
				}
				.right{
					width: 100%;
					padding-left: 15px;
					.righttip{
						font-size: 13px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #0C1317;
						padding-bottom: 5px;
					}
					.bottom{
						.star{
							display: flex;
							color: #fd9130;
							text{
								padding-right: 4px;
								font-size: 11px;
								color: #0f9efa;
								font-weight: bold;
							}
						}
						.time{
							color: #969899;
						}
					}
				}
			}
			.evaluateText{
				margin: 10px 0 0 0;
				letter-spacing: 0.5px;
				line-height: 20px;
			}
			.lineclamp3{				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3; 
				-webkit-box-orient: vertical;
				white-space: normal;
			}
			.evaluateListImg{
				width: 100%;
				.evaluateListImgItem{ 
					width: 66px;
					height: 66px;
					float: left;
					margin-right: 6px;
					image{
						border-radius: 5px;
					}
				}
			}
			.bottomImg{
				display: flex;
				width: 100%;
				padding-top: 15px;
				image{
					width:18px ;
					height: 18px;
					border-radius: 50%;
				}
				text{
					padding-left: 6px;
					font-size: 14px;
					color: #787B7C;
					font-weight: bold;
				}
			}
		}
	}
} 
</style>
# html # javascript # 前端 # css3
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

【openGauss】让gsql和sqlplus输出包含有SQL及数据的完全一致的文本文件

avatar 华为开发者空间
cover

华为云王泽锋荣获 CNCF 终身成就奖，开源精神引领云原生未来

avatar 华为开发者空间
cover

【openGauss】一种可能是目前最快的从ORACLE同步数据到MogDB(openGauss)的方式

avatar 华为开发者空间