如何获取后端添加的动态内容的高度？

Question

代码片断如下：
想获取 subtitle 区域的实际高度。

    <scroll-view scroll-y="{{isRoll}}" scroll-with-animation scroll-into-view="{{selectId}}"
        bindscroll="watchScroll">
        <view class='content'>
            <view id="item0" class='subinfo'>
                <view class='articletitle'>
                    内容区1
                </view>
                <rich-text space="emsp" nodes="{{xxx}}"></rich-text>
            </view>
            <view id="item1" class='subinfo'>
                <view class='articletitle'>
                   内容区2
                </view>
                <rich-text space="emsp" nodes="{{xxx}}"></rich-text>
            </view>
            <view id="item2" class='subinfo'>
                <view class='articletitle'>
                    内容区3
                </view>
                <rich-text space="emsp" nodes="{{xxx}}"></rich-text>
            </view>
        </view>
    </scroll-view>

  .subinfo {
      width: 100%;
      min-height: 1500rpx;
  }

这样计算出来的 subinfo 高度是CSS设置的高度，也就是：min-height: 1500rpx;，比如后端编辑的内容实际高度可能是2000rpx。

  //计算下面每个锚点的高度
  selectHeight() {
     var list = []
     var height = 0;
     const query = wx.createSelectorQuery();
     query.selectAll('.subinfo').boundingClientRect()
     query.exec((res) => {
        res[0].forEach((item) => {
          height += item.height;
          list.push(height)
        })
        this.data.heightArr = list
     })
  },

监听scroll-view的滚动事件如下：

  //监听scroll-view的滚动事件
  watchScroll(e) {
  // 如果是点击导致页面滚动，则不执行下面的内容
     if (this.data.isClick) {
         this.setData({
            isClick: false
         })
         return
     }
     let scrollTop = e.detail.scrollTop; //获取距离顶部的距离
     let active = this.data.active;
     if (scrollTop >= this.data.distance) {
        if (active + 1 < this.data.heightArr.length && scrollTop >= this.data.heightArr[active]) {
          this.setData({
            active: active + 1
          })
        }
     } else {
        if (active - 1 >= 0 && scrollTop < this.data.heightArr[active - 1]) {
          this.setData({
            active: active - 1
          })
        }
     }
     this.data.distance = scrollTop;
  },

Answer 1

页面渲染完成之后再去计算对应内容的高度，然后去更新每一个锚点应该在的位置数据。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。