微信小程序获取文本宽度。进行显隐操作

本文主要是介绍微信小程序获取文本宽度。进行显隐操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

肯定是动态数据，在拿到数据之后，先给数据一个控制显隐的值。

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

<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>