uni-app中文本过长-实现折叠与展开效果

旧城等待， 2022-05-21 12:56 1038阅读 0赞

**在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个项目，也遇到此情况，就将此顺便总结下来~**

**一、先上效果**

![2019103019560185.gif][]

二、源码

<template>
    	<view class="wrap">
    		
    		<view class="fload" :class="isFload ? 'hide' : 'show'">
    				散文是一个汉语词汇，拼音是sǎn wén。
    一指文采焕发；二指犹行文；三指文体名。散文是一种抒发作者真情实感、
    散文是一个汉语词汇，拼音是sǎn wén。一指文采焕发；
    二指犹行文；三指文体名。散文是一种抒发作者真情实感、
    写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平...
    		</view>
    		
    		
    		<text v-if="isFload"  class="iconfont upArrow switch" @click="fload"></text>
    		<text v-if="!isFload" class="iconfont downArrow switch" @click="fload"></text>
    	</view>
    	
    </template>
    
    <script>
    	export default{
    	      data(){
    		   return{
    			isFload: true 
    		   }
    		},
    		methods:{
    		    fload(){
                              //改变isFload的状态
    			  this.isFload = !this.isFload;
    		    }
    		}
    	}
    </script>
    
    <style>
    	.wrap{
    		width:700upx;
    		display: flex;
    		font-size:26upx;
    		justify-content: space-between;
    		margin: 0 auto;
    	}
    	.fload{
    		width:600upx;
    		height: auto;
    		display: -webkit-box;
    		word-break: break-all;
    		-webkit-box-orient: vertical;
    		/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
    		-webkit-line-clamp: 3;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		margin-right: 40upx;
    		background-color:#F5F5F5;
    	}
    	.hide{
    		display: -webkit-box;
    	}
    	.show{
    		display: block;
    	}
    	
    
    </style>

小程序中也是类似的思路~

[2019103019560185.gif]: /images/20220521/567d1a69a39c4b9b9ad8b795b22df71e.png