uni实现折叠展开功能（使用$set添加标记）

1、需求分析：

   展示所有文本内容，溢出两行显示...

   超出内容显示展开或者收起。

实现效果：

 

2、实现思路：

   （1)先循环所需展示的内容。文本处的css设置超出显示...

   

.host-text{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2;  /* 设置行数 */
	-webkit-box-orient: vertical;
   }

（2）超出2行的字数显示展开，并将之前内容隐藏

<view class="host-img" v-if="item.signature.length > 52">
	<text v-if="item.status" @tap="changeStatus(item.status,index)">展开</text>
	<text v-if="item.status == false"  @tap="changeStatusUp(item.status,index)">收起</text>
    <img :src="item.status ? '/static/images/over.png' : '/static/images/an.png'" class="over">
</view>

（3）将循环的数组中加入标识，进而控制每个对象的展开折叠

       $set console打印时可以改变数据的值，但是视图不会更新。因此需要在改变数据时根据index动态插入。

//改变是否展开的状态
			changeStatus(status,index){
				this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:false}))
			},
			changeStatusUp(status,index){
				this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:true}))
			},
			//计算文字长度并设置卡片是否可以展开收起
			calculateText(){
				this.hostList.forEach((el,index)=>{
					this.$set(this.hostList,index,Object.assign({},el,{status:null}))
					if (el.signature.length > 50) {
						this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:true}))
					} else{
						this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:null}))
					}
				})
			}

 

 4、完整代码

<template>
	<view class="host">
		<view class="host-safe" v-for="(item,index) in hostList" :key="index">
			<view class="host-top">
				<view class="host-top-left">
					<img :src="item.img" alt="">
				</view>
				<view class="host-top-right">
					<view class="host-title">
						{{item.name}}
					</view>
					<view class="host-num">
						<text class="text1">粉丝数：{{item.fansnum}}</text>
						<text class="text2">销售额：{{item.salesnum}}</text>
					</view>
				</view>
			</view>
			<view class="host-content">
				<view :class="{'host-text' : item.status}">
					个性签名：{{item.signature}}
				</view>
				<view class="host-img" v-if="item.signature.length > 52">
					<text v-if="item.status" @tap="changeStatus(item.status,index)">展开</text>
					<text v-if="item.status == false"  @tap="changeStatusUp(item.status,index)">收起</text>
					<img :src="item.status ? '/static/images/over.png' : '/static/images/an.png'" class="over">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				currentId:0,//当前应该展开的是条数据
				hostList:[
					{
						id:0,
						img:'/static/images/yyqx.jpg',
						name:'宝贝',
						fansnum:'287.2w',
						salesnum:'1982.2w',
						signature:'1'
					},
					{
						id:1,
						img:'/static/images/yyqx.jpg',
						name:'宝贝',
						fansnum:'287.2w',
						salesnum:'1982.2w',
						signature:'大礼。'
					},
					{
						id:2,
						img:'/static/images/yyqx.jpg',
						name:'贝',
						fansnum:'287.2w',
						salesnum:'1982.2w',
						signature:'宝藏。'
					},
					{
						id:3,
						img:'/static/images/yyqx.jpg',
						name:'儿',
						fansnum:'287.2w',
						salesnum:'1982.2w',
						signature:'宝。'
					},
					{
						id:4,
						img:'/static/images/yyqx.jpg',
						name:'烈',
						fansnum:'287.2w',
						salesnum:'1982.2w',
						signature:'打开神秘的宝藏 大礼。'
					}
				]
			}
		},
		methods:{
			hidetext(id){
				this.currentId = id
			},
			//改变是否展开的状态
			changeStatus(status,index){
				this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:false}))
			},
			changeStatusUp(status,index){
				this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:true}))
			},
			//计算文字长度并设置卡片是否可以展开收起
			calculateText(){
				this.hostList.forEach((el,index)=>{
					this.$set(this.hostList,index,Object.assign({},el,{status:null}))
					if (el.signature.length > 50) {
						this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:true}))
					} else{
						this.$set(this.hostList,index,Object.assign({},this.hostList[index],{status:null}))
					}
				})
			}
		},
		onLoad() {
			
		},
		created() {
			this.$nextTick(()=>{
				this.calculateText()
			})
		}
	}
</script>

<style lang="scss">
	.host{
		height: 100vh;
		overflow-y: auto;
		background-color: #F4F6FA;
		padding:0 24upx 80upx 24upx;
		.host-safe{
			background-color: #fff;
			border-radius: 20upx;
			padding: 30upx;
			margin-top: 20upx;
			.host-top{
				display: flex;
				.host-top-left{
					img{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
				}
				.host-top-right{
					margin-left: 20upx;
					.host-title{
						font-size: 28upx;
						color: #333333;
						font-weight: 600;
					}
					.host-num{
						margin-top: 10upx;
						font-size: 24upx;
						color: #666666;
						.text2{
							margin-left: 55upx;
						}
					}
				}
			}
			.host-content{
				font-size: 24upx;
				color: #666666;
				margin-top: 10upx;
				.host-text{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp:2;  /* 设置行数 */
					-webkit-box-orient: vertical;
				}
				.host-img{
					text-align: right;
					margin-top: 20upx;
					img{
						width: 22upx;
						height: 22upx;
						position: relative;
						top: 2upx;
						left: 6upx;
					}
				}
			}
		}
	}
</style>