Uni app, the text implementation expands and retracts the full text

effect :

  Ideas ：

1. According to the layout displayed by text , The approximate number of words that can be displayed per line .（ The instance is roughly per line 26 A word ）

2. When the page is loaded first , Judge whether the number of custom lines is exceeded according to the total length of the text , To process the corresponding data , Extra custom lines , Intercept the corresponding number of words for display

Code and explanation ：

1. Set parameters （script in ）

 isShowAllContent： Yes, both “ The full text ” written words

txt_content： All text content

tempContent： Text content displayed after processing

2. Enter the page to process data

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. Layout

<!-- The article is put away with the full text -->
            <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"> The full text </text>
                <text class="yd-quanwen" v-else @click="toggleDescription"> Retract </text>
            </template>

 4.“ The full text ” or “ Retract ” Button click event handling

// Full text and collapse
            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) + "..."
                }
            },

The overall code ：

complete , Realize the expansion and collapse of text ！！！