肯定是动态数据,在拿到数据之后,先给数据一个控制显隐的值。
js
const query = wx.createSelectorQuery();
let containerWidth;
// 大容器宽高永远都不会动,所以只取一个
query.select(".no_info_cause").boundingClientRect(containerRect=>{ // 大容器
console.log('containerRect.width', containerRect.width);
containerWidth = containerRect.width;
});
// 动态拿的值根据内容撑开宽高,所以需要动态拿取所有的。
query.selectAll("#myContainer").boundingClientRect(rects=>{ // 文字容器
console.log("rect", rects, containerWidth);
rects.forEach((item, index) => {
if (item.width > containerWidth) {
that.data.couponListBu.forEach((_, i) => {
that.data.couponListBu[index].isShow = true;
})
console.log('文本超出了容器', that.data.couponListBu[index].isShow);
} else {
that.data.couponListBu.forEach((_, i) => {
that.data.couponListBu[index].isShow = false;
})
console.log('文本没有超出容器', that.data.couponListBu[index].isShow);
}
});
}).exec();
// 拿不到值所以用了定时器,有大神知道的可以教一下。
setTimeout(() => {
that.setData({
couponListBu: that.data.couponListBu
})
}, 300);
html
<view class="no_info">
<!-- 不可用原因:<text>{{item.reason}}</text> -->
<view class="no_info_cause">
<!-- <text>不可用原因:</text> -->
<text class="no_info_content_overflow" id="myContainer">
<text id="myText">
<text class="no_info_cause_one">不可用原因:</text>{{item.reason}}
</text>
</text>
</view>
<!-- <view class="no_info_content"wx:if="{{ itemisShow }}">{{item.reason}}</view> -->
<view class="no_info_image">
<image wx:if="{{ item.isShow }}" src="../../images/coupon/down.png" mode="" bindtap="onClickIsShow" />
<!-- <image wx:if="{{ item.isShow }}" src="../../images/coupon/up.png" mode="" bindtap="onClickIsShowCause" /> -->
</view>
</view>