希望ray物料区的TyTabs组件支持超长自动滚动

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
dev4shane
Posts: 1

ray物料区TyTabs链接: https://developer.tuya.com/material/li ... ode=TyTabs,希望支持tab过多的时候可以滑动点击,类似ant mobile 里面的tabs, 超长可以自动滚动,链接https://mobile.ant.design/zh/components/tabs,谢谢

lshinylee
Posts: 312

Re: 希望ray物料区的TyTabs组件支持超长自动滚动

我们会规划安排进去支持并优化,感谢反馈~

:D :D :D

muhai
Posts: 99

Re: 希望ray物料区的TyTabs组件支持超长自动滚动

Code: Select all

yarn add --registry=https://registry.npmjs.org/ @ray-js/components-ty-tabs@^0.0.13

0.0.13已支持,Tabs 属性中tabStyle指定width即可,示例:

Code: Select all

const list = [
    {
      label: '标签 1',
      value: '盛年不重来',
      tabKey: '1',
    },
    {
      label: '标签 2',
      value: '一日难再晨',
      tabKey: '2',
    },
    {
      label: '标签 3',
      value: '及时宜自勉',
      tabKey: '3',
    },
    {
      label: '标签 4',
      value: '及时宜自勉',
      tabKey: '4',
    },
    {
      label: '标签 5',
      value: '及时宜自勉',
      tabKey: '5',
    },
  ];
  
<Tabs tabStyle={{ width: '30%' }} tabBarPosition="bottom" activeKey={tabKey}> {list.map(item => ( <Tabs.TabPanel key={item.label} tabKey={item.label} tab={item.label}> <View className={styles.tabContent}>{item.value}</View> </Tabs.TabPanel> ))} </Tabs>

在线Demo效果展示:https://static1.tuyacn.com/static/txp-r ... 7332890681

Post Reply