一、实现效果
二、代码实现
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>
到这里就完成啦~