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

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; 
}
相关推荐
光影少年1 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_2 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189114 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾5 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu8 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym12 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫13 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫17 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat19 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js