问题记录:taro小程序调用nutui的tab选项卡组件,点击标题出现回弹问题

情况: 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组件,使用自定义标签栏的话,效果会不尽人意。头大。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值