【小程序scroll-view适配高度问题】

小程序scroll-view适配高度问题

因为手机屏幕的分辨率不一样，需要计算出scroll-view高度进行适配
官网给出 wx.getSystemInfo 方法可以获取手机信息包括型号，分辨率等一些参数

wx.createSelectorQuery().select(‘.class’).boundingClientRect()方法可以获取标签的高度

如果是自定义的标题，可以通过上面方法拿到高度
否则可以通过wx.getMenuButtonBoundingClientRect()拿到小程序右上角的胶囊高度，这里因为iPhone的型号问题，处理方式不一样
我的处理方式是用胶囊距离手机顶端的top减去手机状态栏的高度乘2再加上胶囊高度得到的标题高度，但是这种做法有问题，因为我没有去做iPhone的型号适配

let capsule = wx.getMenuButtonBoundingClientRect();
var capsuleHeight = (Number(capsule.top)-statusBarHeight)*2 + Number(capsule.height)

计算scroll-view的高度无非就是手机屏幕高度减去 状态栏高度 标题高度等等，是很简单的

！！！！！！！！！！！！！

因为我是用的父页面套用子页面的方式做的小程序页面，就导致父页面通过wx.createSelectorQuery().select(‘.class’).boundingClientRect()拿不到子页面的标签高度，
父页面

<view class="content" id="tabs" bind:click="onClickTab">
   <van-tabs >
      <van-tab >
        <hall-content class="hall-con" ></hall-content>
      </van-tab>
      <van-tab >
         <hall-content ></hall-content>
      </van-tab>
   </van-tabs>
</view>

hall-content就是子页面

<template>
  <view class="page">
    <view id="searchID">
    </view>
  </view>
</template>

我这里的做法是在hall-content标签上定义一个class或者id
然后通过

query.select('.hall-con >>> #searchID').boundingClientRect()

拿到子页面的标签高度

剩下的就是计算scroll-view高度

Number(screenHeight)-Number(statusBarHeight)-Number(data[0].height)-(Number(screenHeight)-Number(bottom))-Number(capsuleHeight)

项目中用到的手机wx.getSystemInfo获取到的数据

screenHeight 屏幕的高度
statusBarHeight 状态栏高度
data[0].height 一些标签高度
(Number(screenHeight)-Number(bottom)) bottom是 wx.getSystemInfo获取结果中的safeArea中的bottom，我认为的含义就是手机左上角或者右上角距离屏幕底部的高度，因为苹果手机的底部横条（操作条）用 screenHeight 减去 bottom 得到的值为44 ，调试用的是iPhone 12 mini，据查询得到确实是44px，因为有的苹果没有横条，所以可以用这个进行适配
capsuleHeight 标题高度，，这里没有进行适配，，不过也可以用