博客

富文本点击查看更多，如果内容超多出3行显示，未超过隐藏，显示所有富文本内容

最近遇到个bug，当我的富文本满3行之后需要显示更多，未满3行全铺；

我想了好久，首先我想到的是算它的字的高度与宽度与总体宽度与高度进行取余，发现可能会很麻烦，计算字的高度…果断放弃了，于是有了第二种想法，我计算3行需要的高度，然后给定个死的值，再用富文本的高度与3行的高度进行对比，对查看更多进行显示和隐藏；哈哈果真可以

接下来就是我编码的过程啦，首先我们需要计算富文本的高度，发现uniapp上有实列；

   const query = uni.createSelectorQuery().in(this);
          query
          .select("#id的名字")
          .boundingClientRect((data) => {
      		console.log(data.height);
          })

然后我发现这样子还是不行，于是问了大佬，说可能是渲染先后的问题，我加了个定时器就可以打印了，但是我需要得到这个高度，所以我给定义了一个值，把这个data.height给赋值了，就很nice；于是我开始写判断，首先在data中定义个返回值，

isokbutton: true,

查看更多显示或隐藏，true为显示false为隐藏；🆗

我们把逻辑带上

this.isokbutton = this.定死的高度的赋值< this.data.height;


之后给我们的查看更多加上

v-if="isokbutton"


就完美解决啦

文本代码：

 <view class="button" v-if="isokbutton" @click="自己定义点击事件">查看更多</view>

data代码

 data() {
    return {
      isokbutton: true,按钮的显示隐藏
      checkgroup: 60,定死的高度3行
      checkmore: 0,这是富文本高度
    };
  },

 mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        //定时器
        const query = uni.createSelectorQuery().in(this);
          query
          .select("#titlefuwenb")
          .boundingClientRect((data) => {
            this.checkmore = data.height;
            this.isokbutton = this.checkgroup < this.checkmore;
            console.log(this.checkgroup);
            console.log(this.checkmore);
          })
      }, 2000);
      }

大家记得自己想想哦，一起进步！