search

jdf2e / nutui

京东风格的移动端 Vue 组件库，支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
https://nutui.jd.com
MIT License
6.12k stars 832 forks source link

Tabs 选项卡切换-自定义标签栏 #2335

Open momtboy opened 1 year ago

momtboy commented 1 year ago

What problem does this feature solve?（这个功能解决的问题）

使用自定义标签栏，并开启了title-scroll，标签栏无法自动滚动。

What does the proposed API look like?（期望的 API）

期望可以提供一个 scrollTo 的方法，滚动到指定的标签页；参考 https://vant-ui.github.io/vant/#/zh-CN/tab#tabs-fang-fa

eiinu commented 1 year ago

在使用自定义标签栏时，整个导航栏都是由外部传入的，Tabs 组件内难以实现对它的滚动的控制

momtboy commented 1 year ago

了解，不过这确实是实际应用中很需要的一个功能，可以参考一下 vant 的实现原理嘛，https://github.com/youzan/vant/blob/main/packages/vant/src/tabs/Tabs.tsx

eiinu commented 1 year ago

了解，不过这确实是实际应用中很需要的一个功能，可以参考一下 vant 的实现原理嘛，https://github.com/youzan/vant/blob/main/packages/vant/src/tabs/Tabs.tsx

NutUI 的「自定义标签栏」功能指的是提供整个标签导航区域的插槽，其代码结构、激活滚动等样式完全由开发者控制，通过设置 v-model 来实现 tab-pane 的切换。 标签栏不由组件控制，无法实现 scrollTo 的效果

Vant 的「自定义标签」是指在每个标签中通过插槽定义 title 节点，标签栏是在组件内部渲染的，可以实现控制

是两个不同的功能，从实现方式与用法上都有很大差别。

后续可以增加「自定义标签」这种形式的功能。

hejuan-moon commented 4 months ago

+1，这种功能很常见，很需要，因为使用非自定义的标签栏太限制 了，比如我想加个未读红点提示都没有，这也是很常见的功能，但是自定义的又不能使用-滚动到指定的标签页-官方封装的这种功能，这样就搞的整个组件都不好用了，要自己重新写