【文本展开收起】uniapp—实现文本的展开与收起功能

一、实现效果

二、代码实现

2.1 思路:

1.根据文本显示的布局中，每行大致能显示的文字个数
2.首先加载页面时，根据文字总长度判断是否超出自定义行数，来处理相应的数据，多余自定义行数，截取对应的文字个数做显示。

2.2具体代码:

<template>
	<view class="">
		<!--1.布局 文章收起与全文 -->
		<text class="article_content">{
   
   {tempContent}}</text>
		<view class="intro_toggle" v-if="txt_content !== null && txt_content.length > 80">
			<text class="quanwen" v-if="isShowAllContent" @click="toggleDescription">
				展开
				<image src="../../static/imgs/zhankai.png"></image>
			</text>
			<text class="quanwen" v-else @click="toggleDescription">
				收起
				<image src="../../static/imgs/shouqi.png"></image>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				//2.展开收起-参数
				isShowAllContent: false,
				txt_content: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同',
				tempContent: ''

			}
		},
		onLoad() {
      
      
			//3.进入页面处理（展开收起）数据
			var that = this
			var txtCntIndex = that.txt_content.length
			if (txtCntIndex > 85) {
      
      
				that.isShowAllContent = true
				that.tempContent = that.txt_content.substr(0, 85) + "..."
			} else {
      
      
				that.isShowAllContent = false
				that.tempContent = that.txt_content
			}
		},

		methods: {
      
      
			// 4.点击 展开与收起，处理文本
			toggleDescription: function() {
      
      
				var that= this
				if (that.isShowAllContent) {
      
      
					that.isShowAllContent = false
					that.tempContent = that.txt_content
				} else {
      
      
					that.isShowAllContent = true
					that.tempContent = that.txt_content.substring(0, 85) + "..."
				}
			},
			
		}
	}
</script>

到这里就完成啦~

ending~