uniapp ----通过文字占用行数判断文字收起展开的功能

uniapp ----通过文字占用行数判断文字收起展开的功能

html:

<view class="widP100 paddingA20  boxSize display linHeight40 "
:style="{height:descHeight+'rpx'}">
<view class="fontSize12 widP100">
	<text :id="'getLinehei'+item.id" :style="{lineHeight: '30rpx'}"
		class="paddB20">{
   
   {lineCount>conAll?details:item.detail}}</text>
	<span v-if="lineCount > conAll">
		{
   
   {item.fold ? details:'...'}}
		<span class="fontSize12 paddL10" @click.stop="foldBtn(item.id)">
			<span v-show="!item.fold">展开<text
					class="iconfont icon-shixinjiantou-xia fontSize12"></text></span>
			<span v-show="item.fold">收起<text class="iconfont icon-shixinjiantou-shang fontSize12"></text></span>
		</span>
	</span>
</view>
</view>

js

export default {
    
    
data() {
    
    
	return {
    
    
		descHeight: 300, //简介高度
		vplayHei: 420, //视频高度
		lineCount: 0, //文字占用的行数
		conAll: 7, //在7行的时候文字隐藏
		details:'',//截取的文字
		detNum: 88, //详情文字数量
		}
	},
onReady() {
    
    
		this.getLineNum();
	},
methods: {
    
    
	// 获取视频详情文字占用的行数
	getLineNum() {
    
    
		setTimeout(() => {
    
    
			uni.createSelectorQuery().in(this).select('#getLinehei' + this.vid).boundingClientRect(
			rect => {
    
    
				let height = rect.height;
				let detNum = this.detNum;
				this.lineCount = parseInt(height / uni.upx2px(30));
				if (this.lineCount > this.conAll) {
    
      //超出行数 截取文字字数
					let det = this.dataList[this.k].detail.trim(' ')
					this.details = det.slice(0,detNum)
				} 
			}).exec();
		}, 500)
	},
	//  简单适配手机高度不同 适应的文字高度也不同
	getSystemInfoSync() {
    
    
		let datas = uni.getSystemInfoSync();
		if (datas.windowHeight <= 745) {
    
    
			this.descHeight = 220;
			this.conAll = 5;
			this.detNum = 60;
		}
	},
	//文字展开收起的功能
	foldBtn(id) {
    
    
		this.dataList.forEach(item => {
    
    
			if (item.id == id) {
    
    
				let det = item.detail;
				item.fold = !item.fold;
				if (item.fold) {
    
    
					this.detailInfos = det;
					this.vertical = false; //文字展开后手机禁止滑动
				} else {
    
    
					this.vertical = true;
				}
			}
		})
	},
}
}