uni-app中文本過長-實現摺疊與展開效果

在實際的開發中,疑或是頁面的預覽中,或多或少都碰到過這樣的情景,那就是文本的摺疊與展開!近期在做一個項目，也遇到此情況，就將此順便總結下來~

 

一、先上效果

 

 

二、源碼

<template>
	<view class="wrap">
		<!--  -->
		<view class="fload" :class="isFload ? 'hide' : 'show'">
				散文是一個漢語詞彙，拼音是sǎn wén。
一指文采煥發；二指猶行文；三指文體名。散文是一種抒發作者真情實感、
散文是一個漢語詞彙，拼音是sǎn wén。一指文采煥發；
二指猶行文；三指文體名。散文是一種抒發作者真情實感、
寫作方式靈活的記敘類文學體裁。“散文”一詞大概出現在北宋太平...
		</view>
		
		<!-- 此處用了iconfont圖標，自行處理或換成自己的圖標-->
		<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>

 

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