我爱小程序
<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="onGoodsClick(goods)" ></goods-card> </view> </view> </scroll-view> </view> |
在onShow中获取数据填充goodsList
async onShow () { const { result } = await getGoodsList()
|
目标是当页面数据加载完毕，也就是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？