众所周知，小程序不能像jQuery一样去操作dom元素来获得元素的高度，给的wx.createSelectorQuery（）方法还是一个异步的方法，如果两个套起来的话我做过测试，会一直循环，而我要做的页面是这样的
header区域和按钮区域都是要动态获取的，因为虽然设置了rpx的高度，但是！！！，当你取出来用屏幕高度去*2再减去这两个区域的高度*2的时候，获得的高度是不对的！不信的同学自己去试试，百分百页面还有滚动条！
所以要换一种做法，我的页面header是个自定义插件，所以header的高度在自定义组件中获取到，然后发送到父元素，然后再使用wx.createSelectorQuery方法获取到按钮区域的高度，再用屏幕高度一减，获得的高度就对了。代码我给贴一下
header自定义组件的js
ready(){ const query = this.createSelectorQuery() query.select(\'.header\').boundingClientRect() query.selectViewport().scrollOffset() query.exec((res)=>{ // console.log(res[0].height) let a = res[0].height this.triggerEvent(\'getHeader\',a) }) },
页面的wxml
<header title="库存查询" blcShow="{{true}}" bindgetHeader="getHeaderHeight"></header>
<scroll-view scroll-y class="scroll" style="height:{{scrollHeight}}px" lower-threshold="{{30}}" bindscrolltolower="nextPage">
页面的js
getHeaderHeight(e){ let headerHeight = e.detail let a = wx.getSystemInfoSync() a = a.windowHeight const query = wx.createSelectorQuery() query.select(\'.filter-wrap\').boundingClientRect() query.selectViewport().scrollOffset() query.exec(res=>{ let b = a - headerHeight - (res[0].height) console.log(a,headerHeight,res[0].height,b) this.setData({scrollHeight:b}) }) },
设置的scrollHeight就是一个正确的高度
请发表评论