小程序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 标题高度,,这里没有进行适配,,不过也可以用