微信小程序动态计算文本高度

Geng~

已于 2023-08-15 10:54:44 修改

阅读量1.1k

点赞数 2

文章标签：微信小程序小程序 javascript

于 2022-08-26 12:56:55 首次发布

本文链接：https://blog.csdn.net/geng97280/article/details/126541253

版权

废话不多说 直接上代码

一.wxml结构页面，里边的文字替换成自己需要的即可
<view class="speak_top_blue_text {{showAll?'negotiation_info_text_showAll':'negotiation_info_text_showPartton'}} {{bigFont?'bigFont10':''}}">
    <view class="needToQueryHeight">
        留言前请先阅读以下条款：
        <text>
          一、不得发表违反中华人民共和国宪法和法律、违反改革开放和四项基本原则的言论；
          二、不得发表造谣、诽谤他人的言论；
          三、不得发表未经证实的消息，亲身经历请注明；
          四、请勿发表任何形式的广告，企业推广产品或服务；
        </text>
      </view>
      <block wx:if="{{showAll}}">
        <view class="negotiation_info_downarrow" bindtap="showAll">
          <image src="../../icons/uparrow.png" class="downarrow {{bigFont?'bigImg4':''}}"></image>
        </view>
      </block>
      <block wx:else>
        <!-- 文字超过5行显示此部分内容 -->
        <view class="negotiation_info_downarrow" bindtap="showAll" wx:if="{{hasAll}}">
          <image src="../../icons/downarrow.png" class="downarrow {{bigFont?'bigImg4':''}}"></image>
       </view>
   </block>
</view>


二.css页面
.negotiation_info_text_showAll {
  height: 100%;
}

.negotiation_info_text_showPartton {
  overflow: hidden;
  /* 显示5行 */
  /* height: calc(60rpx * 5); */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


.negotiation_info_downarrow {
  display: flex;
  margin-left: 40%;
  position: absolute;
  width: 80rpx;
  height: 50rpx;
}

.downarrow {
  width: 32.64rpx;
  height: 15.58rpx;
}


三.js文件
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.queryHeight()
  },


/**
   * 展示/隐藏 所有文字
   */
  showAll() {
    this.setData({
      showAll: !this.data.showAll
    })
  },

  // 动态获取高度
  queryHeight() {
    let query = wx.createSelectorQuery();
    // 获取富文本高度。bug：iOS无法获取
    query.select('.needToQueryHeight').boundingClientRect(rect => {
      // 元素高度 >=30px * 5行 ，则显示
      let height = rect.height >= 50 ? true : false
      console.log('超过5行', height, rect.height)
      this.setData({
        hasAll: height
      })
    }).exec();
  },