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;
}
}
})
},
}
}