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

seven_ • 2023年2月27日下午10:11 • Android • 阅读 551

效果:

思路：

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) + “…”
               }
           },