微信小程序 在van-tabs 嵌套scroll-view 场景下，解决scroll-view无法自适应外部组件的高度

在微信小程序中使用vant框架的van-tabs组件（也称为van-tabbar）实现页面之间的导航，你需要遵循以下步骤： 1. **引入依赖**： 首先，在`app.json`文件中添加vant库的依赖，如： ```json { "dependencies": { "vant": "^2.0.0-rc.6" } } ``` 2. **安装并注册组件**： 使用`npm install vant`命令安装，然后在你的项目中导入并注册van-tabbar组件： ```javascript import { VanTabBar, VanTab } from 'vant'; Page({ onReady() { this.$mount(VanTabBar); }, }); ``` 3. **配置van-tabbar**： 在需要放置tab栏的页面中，创建一个`<van-tabbar>`标签，并设置各个选项卡（van-tab）： ```html <van-tabbar> <van-tab v-for="(item, index) in tabs" :key="index" :active="active === index"> <view>{{ item.name }}</view> </van-tab> </van-tabbar> ``` `tabs`是一个数组，包含每个选项卡的配置，例如名称、路径等。 4. **控制切换**： 可以通过数据绑定（`v-model`）或事件处理来控制当前激活的tab，比如： ```html <van-tabbar active="{{ currentTab }}" @change="handleChange"> ... </van-tabbar> ``` 在js里处理`handleChange`函数，更新`currentTab`值对应新的页面路径。 5. **关联页面**： 每个`van-tab`对应的`<view>`标签内部，可以放置`<navigator>`标签，链接到相应的子页面。例如： ```html <van-tab :active="true"> <navigator url="/pages/details/details"></navigator> </van-tab> ```