收藏
回答

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

<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()

      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?

最后一次编辑于  09-18
回答关注问题邀请回答
收藏
问题标签