有一个这样的应用场景,用户信息内容中, 一行展示多个标签,超出宽度展示折叠按钮,点击折叠按钮展示全部。 且单个标签宽度不固定。
解决思路, 当前信息 盒子元素设置max-width;overflow:hidden,让内容自动撑开。js 在渲染完后,判断盒子的实际宽度,大于等于max-width展示折叠按钮,否则不展示;
uni代码参考
getMore() {
var that = this;
let winW = wx.getSystemInfoSync().windowWidth;
//计算rpx单位宽度规则 winW/750 = tagsWidth /wrapWidth;wrapWidth展示区域宽度
let tagsWidth = parseInt((winW / 750) * wrapWidth);
query
.select('#tag')
.boundingClientRect(data => {
console.log(data, 'da2');
if (!data) {
return false;
}
let isShowBtn =this.data.isShowBtn
if (data.width >= tagsWidth) {
isShowBtn = true;
} else if (data.width < tagsWidth) {
isShowBtn = false;
}
this.setData({isShowBtn})
})
.exec();
});
},
后记: 内容超出固定高度做折叠隐藏也可以按这个思路实现;;