uni-app，一段文字实现展开、收起全文点点点

最新推荐文章于 2024-06-12 19:12:14 发布

小邱程序员

最新推荐文章于 2024-06-12 19:12:14 发布

阅读量996

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_62876802/article/details/126429957

版权

效果：

思路：

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

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

<template>
	<view>
	<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>
	</view>
</template>
<script>
	export default {
		data() {
			return {
                tempContent:'',
				isShowAllContent:false,
				txt_content:"近年来极端天气频发，内容内容内容内容内容内容内容内容内容内容...."
            }
        },
        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
            }
        },
        methods:{
            // 全文与收起
            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) + "..."
                }
            },
        }
    }
</script>