使用scroll-view计算页面剩余高度

最新推荐文章于 2024-08-08 09:23:31 发布

-Wack-

最新推荐文章于 2024-08-08 09:23:31 发布

阅读量519

点赞数

文章标签：前端 html javascript 微信小程序

本文链接：https://blog.csdn.net/weixin_59803648/article/details/126034562

版权

1. onReady钩子中获取可使用窗口的高度

2. 将选择器的范围更改至组件内uni.createSelectorQuery().in(this)

3. 根据类名进行选择并获取数据

4. 窗口高度-获取元素的高度=可使用高度

// scroll-view中高度需设为px，下拉触底需通过事件scrolltolower
<scroll-view class="left-scroll-view" scroll-y :style="{height: scrollHeight + 'px'}" @scrolltolower="loadmore"></scroll-view>
onReady() {
      uni.getSystemInfo({
        success:(res)=>{
          this.wh = res.windowHeight
        }
      })
      let query = uni.createSelectorQuery().in(this)
      query.select('.bg').boundingClientRect()
      query.select('.timeShow').boundingClientRect()
      query.exec((res)=>{
        let bgH = res[0].height
        let timeH = res[1].height
        this.scrollHeight = this.wh-bgH-timeH
      })
    },