uniapp的描述的展开与收缩，超过三行有省略号才显示

前端小凯2024-03-18 18:45

html代码：

html 复制代码

<view class="desc_box">
    <view id="desc" class="desc" :class="open ? 'open' : 'three'">
        {{ data.desc }}
    </view>
    <view class="expand theme-color" @click="unfold" v-if="unfoldShow">
        {{ open ? '收起' : '展开' }}
        <i class="iconfont icon-xiala" :class="open ? 'up' : ''"></i>
    </view>
</view>

js代码：

data的部分：

javascript 复制代码

// 是否打开
open: true,
// 是否展开
unfoldShow: false

methods的部分：

javascript 复制代码

/**
 * 展开收起
 */
unfold() {
    this.open = !this.open;
},
/**
 * 判断是否超过三行
 */
checkTextLines() {
    // 获取 <div> 标签的节点信息
    let query = uni.createSelectorQuery().in(this);
    query.select('.desc_box').boundingClientRect(data => {
        // 获取文本内容的高度
        let height = data.height - 70;
        console.log("data", data);
        console.log("height", height);
        // 行高为28px
        let lineHeight = 28;
        // 计算文本行数
        let lines = Math.ceil(height / lineHeight);
        // 判断文本行数是否达到了3行
        if (lines > 3) {
            console.log("文本达到了3行以上");
            this.unfoldShow = true;
            this.open = false;
        } else {
            console.log("文本3行或3行以下");
            this.unfoldShow = false;
            this.open = true;
        }
    }).exec();
}

在获取完数据的地方调用this.checkTextLines();

css部分：

css 复制代码

.desc_box {
		width: 686rpx;
		background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.51) 100%);
		box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(255,255,255,0.5), inset 0rpx -2rpx 6rpx 0rpx rgba(255,255,255,0.5);
		border-radius: 8rpx;
		backdrop-filter: blur(12px);
		margin-top: 24rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

    .desc {
        width: 100%;
        margin-top: 16rpx;
        color: #666666;
        line-height: 40rpx;
        white-space: pre-line;
    }

    .expand {
        display: flex;
        font-size: 24rpx;
        height: 34rpx;
        line-height: 34rpx;

        i {
            font-size: 24rpx;
            margin-left: 4rpx;
        }

        .up {
            transform: rotate(180deg);
        }
    }
}


.one {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.two {
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}

.three{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3; 
}