情况: taro小程序,nutui的tab选项卡组件。
<view class="wrapper">
<nut-tabs v-model="tabValue" direction="vertical" title-scroll style="height:100%" name="tabName">
<!-- 选项卡 title -->
<template #titles>
<view v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="tabTitle(item.paneKey)">
<view class="custom-title" :class="{
active: tabValue === item.paneKey
}">
<view class="img">
<img src="" alt="">
</view>
<view class="tabTitle">{{ item.title }}</view>
</view>
</view>
</template>
<!-- 选项卡 content -->
<nut-tab-pane v-for="item in list" :key="item.paneKey" :title="`Tab ${item}`" :pane-key="item.paneKey">
<view class="item" v-for="i in 4"> {{ item.title }}</view>
</nut-tab-pane>
</nut-tabs>
</view>
需求:选项卡组件,设定在一个固定高度的容器内显示。当选项卡高度超出容器高度时,实现组件滚动显示。
出现问题:组件能正常滚动显示,但是当点击超出容器高度的选项时,tab选项卡的标题总是回跳到顶部。
情况1:当wrapper容器设置overflow-y:auto,tab组件能在容器内实现滚动显示内容,但是会出现上述点击title时的回弹问题。
情况2:保留wrapper容器设置的设置,去掉tab组件的 style对象的高度属性。整个tab组件在wrapper容器内滚动显示,没有出现回弹的情况。但是每次点击title后,tab-pane的顶部内容需要每次都自己手动滚动页面回去查看,这不合理。
情况3:发现是自定义title导航区域时候,导致了这个问题的出现。之前的情况1设置样式,并不会出现问题。
在gitHub,nutui框架社区里面,找到的答复(回答时间2023年,7月9日):
“NutUI 的「自定义标签栏」功能指的是提供整个标签导航区域的插槽,其代码结构、激活滚动等样式完全由开发者控制,通过设置 v-model 来实现 tab-pane 的切换。 标签栏不由组件控制,无法实现 scrollTo 的效果”
这意味着,这个tab组件,使用自定义标签栏的话,效果会不尽人意。头大。