微信小程序 scroll-view 自适应高度

如何让微信小程序 scroll-view 自适应高度，而无需通过写死一个 height 或 height: calc(100vh - xxx) 来实现？

项目需求是用 Taro 3.x 要做一个 AI Agent 聊天框

布局为最典型的，ScrollView 垂直方向滚动，底部为文本和语音输入框

如何让 ScrollView 的高度适配各种型号手机的高度？

一开始直接写了一个 height: calc(100vh - xxx) 来解决

发现无法适配的很精确因为 height: calc(100vh - xxx) 中 xxx 这个差值不是一个固定的值

接着直接把布局变为父级 flex-column， ScrollView 设为 flex:1，正常在 web 下这样就可以实现自适应

但小程序的 ScrollView 不吃这一套。搜了一圈发现是要设置其 height: "1px"，相当奇葩

style={{
    flex: 1,
    height: "1px", // 高度自适应
  }}

后期随着功能的增加，布局也发生着变化，想要实现高度自适应必须满足以下条件

1、parent-> parent-> parent -> xxx 都得高度 100%

与在网页中开发中一样，div 的高度要么由自己决定，要么由父级决定，如果父级是百分比高度，则由父级的父决定。

所以root 根节点都要定义成 height: 100vh 或 min-height: 100vh

除非其中某个父级有明确的定义过 height: xxx

这样 ScrollView 才能在未定义明确的 height 下计算出 height

2、ScrollView 必须 flex: 1 且 height: "1px"

父级设为 flex、flex-direction: column 、高度 100%

ScrollView 设为 flex:1 自适应，且必须加 height: '1px'

3、ScrollView 只能单独在一个 View 内

如下，如果有一个或多个其它元素与 ScrollView 同时包裹在一个 View 下

那么 ScrollView 有可能 会占用所有的高度

如下代码:

其它元素如下 className="xxx" 的 View 会被挤下去

而不是和预期的 className="xxx" 先占用固定的高度，剩余的高度空间分配给 ScrollView 占用

// 样式为 tailwindcss
<View className="flex flex-col">
	<ScrollView
      scrollY
      style={{
        flex: 1,
        height: "1px", // 高度自适应
      }}
    >
    	自由的滚动...
    </ScrollView>
	<View className="xxx">
		我是其它元素
	<View>
</View>

如发生以上所说的情况，可将 ScrollView 单独在一个 View 内，改成如下：

// 样式为 tailwindcss
<View className="flex flex-col h-full">
	<View className="flex flex-col h-full flex-1">
	  <ScrollView
	    scrollY
	    style={{
	      flex: 1,
	      height: "100%"
	    }}
	  >
	    我是自由的垂直滚动内容...
	  </ScrollView>
	</View>
	<View className="xxx">
		我是其它元素
	<View>
</View>

以上修改重点就是要再用一个 <View className="flex flex-col h-full flex-1">...<View> 来单独包裹

注意，父级用了 flex 并且还加了 h-full 即 100% 高度。

如上图，为了在真机上实现输入框跟着键盘，键盘定位是 fixed 的，需要根据弹起键盘高度，设置位置，所以还需要在 ScrollView 上边放一个占位用的 View, 其高度设置为 动态获取真实的整个输入框 ui 高度即可。

---

注：转载请注明出处博客园：王二狗Sheldon池中物 (willian12345@126.com)