uni-app，文本实现展开、收起全文

效果:

 思路：

1.根据文本显示的布局中，每行大致能显示的文字个数。（实例是大致每行26个文字）

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

代码与讲解：

1.设置参数（script中）

 isShowAllContent：是都显示“全文”文字

txt_content：所有文字内容

tempContent：处理后显示的文字内容

2.进入页面处理数据

onLoad() {
            var _this = this
            var txtCntIndex = _this.txt_content.length
            if (txtCntIndex > 52) {
                _this.isShowAllContent = true
                _this.tempContent = _this.txt_content.substr(0, 51) + "..."
            } else {
                _this.isShowAllContent = false
                _this.tempContent = _this.txt_content
            }
        },

 3.布局

<!-- 文章收起与全文 -->
            <text class="yd-content">{{tempContent}}</text>
            <template v-if="txt_content !== null && txt_content.length > 52">
                <text class="yd-quanwen" v-if="isShowAllContent" @click="toggleDescription">全文</text>
                <text class="yd-quanwen" v-else @click="toggleDescription">收起</text>
            </template>

 4.“全文”或“收起”按钮的点击事件处理

// 全文与收起
            toggleDescription: function() {
                var _this = this
                if (_this.isShowAllContent) {
                    _this.isShowAllContent = false
                    _this.tempContent = _this.txt_content
                } else {
                    _this.isShowAllContent = true
                    _this.tempContent = _this.txt_content.substring(0, 51) + "..."
                }
            },

整体代码：

完成，实现文本的展开与收起功能！！！