界面是根据异步数据条件渲染，如何在异步数据获取到之后查询到某元素的height？ - WXOPEN Club

<view class="goods-content">

<view v-if="!goodsList[activeTab]" class="no-goods-desc">

努力加载中..

</view>

<scroll-view

v-else

class="goods-list-container"

:style="{ height: scrollHeight + 'px' }"

scroll-y="true"

scroll-with-animation="true"

enable-back-to-top="true"

>

<view v-if="!goodsList[activeTab].length" class="no-goods-desc">

还没有人上架该类商品哦~

</view>

<view v-else class="goods-list" id="goods-list">

<view v-for="(goods) in goodsList[activeTab]">

<goods-card

v-if="goods"

:key="goods._id"

:goods="goods"

[@click](/user/click)="onGoodsClick(goods)"

></goods-card>

</view>

</scroll-view>

</view>

在onShow中获取数据填充goodsList

async onShow () {

const { result } = await getGoodsList()

this.goodsList = { ...this.goodsList, 0: result.data }

}

目标是当页面数据加载完毕，也就是goodsList填充完毕界面根据条件渲染完毕之后获取到id=goodsList元素的height

尝试过：

在onReady中无法获取到，因为这时数据还没拿到，界面渲染的是 “努力加载中”

在setData的回调中获取，将onShow中的赋值代码替换为如下，结果还是拿不到

this.$wx.setData({ goodsList: { ...this.goodsList, 0: result.data } }, function() {

// 计算scrollView高度

const query = wx.createSelectorQuery()

const node = query.select('#goods-list')

node.boundingClientRect(function(rect) {

console.log(rect.height)

})

另外我的最终目的是为了实现下拉加载数据的滚动列表，思路是想获取到当前的商品列表高度设置给scroll-view,当触底时填充数据界面，重新获取高度设置给scroll-view

如果有其他的思路也指教，非常感谢各位。

总结问题：

界面是根据异步数据条件渲染，如何在异步数据获取到之后查询到某元素的height？