问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何实现Tabs页签导航栏切换时下划线也随之滑动?

头像
HarmonyOS助手
    15749106

    如何实现Tabs页签导航栏切换时，下划线也随之滑动

    HarmonyOSharmonyosharmonyos-next
    阅读 695
    avatarAI BotBETA

    你可以使用HTML、CSS和JavaScript来实现这个功能。下面是一个简单的示例：

    HTML结构：

    <div class="tabs">
  <button class="tab" id="tab1">Tab 1</button>
  <button class="tab" id="tab2">Tab 2</button>
  <button class="tab" id="tab3">Tab 3</button>
  <div class="underline" id="underline"></div>
</div>

    CSS样式：

    .tabs {
  display: flex;
  align-items: center;
}

.tab {
  margin-right: 10px;
  padding: 10px;
  border: none;
  background-color: #f1f1f1;
  cursor: pointer;
}

.underline {
  height: 2px;
  background-color: #000;
  width: 0;
  transition: width 0.3s ease;
}

    JavaScript代码：

    let tabs = document.querySelectorAll('.tab');
let underline = document.getElementById('underline');

tabs.forEach(tab => {
  tab.addEventListener('click', function() {
    tabs.forEach(tab => {
      tab.classList.remove('active');
    });
    this.classList.add('active');

    let activeTabWidth = this.offsetWidth;
    underline.style.width = activeTabWidth + 'px';
    underline.style.transform = 'translateX(' + (this.offsetLeft - 10) + 'px)'; // 减去10是为了与按钮的左边距保持一致
  });
});

// 初始化，为第一个标签添加active类
tabs[0].click();

    在这个示例中，我们为每个tab按钮添加了一个点击事件监听器。当点击某个按钮时，我们首先移除所有按钮的active类，然后给被点击的按钮添加active类。同时，我们计算被点击按钮的宽度，并将其设置为下划线的宽度。我们还使用transform属性将下划线移动到正确的位置。最后，我们在页面加载时为第一个标签添加active类，以显示初始状态的下划线。

    请注意，这个示例只是一个简单的实现，可能需要根据你的具体需求进行调整。例如，你可能需要添加更多的样式或动画效果，或者处理其他情况，如动态添加或删除标签等。

    1 个回答
    得票最新
    头像
    HarmonyOS助手
      15749106

      可以使用子页签样式SubTabBarStyle来实现，具体参考如下代码：

      // xxx.ets 
@Entry 
@Component 
struct TabsAttr { 
  private controller: TabsController = new TabsController() 
  @State indicatorColor: Color = Color.Blue; 
  @State indicatorWidth: number = 40; 
  @State indicatorHeight: number = 10; 
  @State indicatorBorderRadius: number = 5; 
  @State indicatorSpace: number = 10; 
  @State subTabBorderRadius: number = 20; 
  @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 
 
  build() { 
    Column() { 
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 
        }.tabBar(SubTabBarStyle.of('pink') 
          .indicator({ 
            color: this.indicatorColor, // 下划线颜色 
            height: this.indicatorHeight, // 下划线高度 
            width: this.indicatorWidth, // 下划线宽度 
            borderRadius: this.indicatorBorderRadius, // 下划线圆角半径 
            marginTop: this.indicatorSpace // 下划线与文字间距 
          }) 
          .selectedMode(this.selectedMode) 
          .board({ borderRadius: this.subTabBorderRadius }) 
          .labelStyle({}) 
        ) 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 
        }.tabBar('yellow') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 
        }.tabBar('blue') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 
        }.tabBar('green') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 
        }.tabBar('gray') 
 
        TabContent() { 
          Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 
        }.tabBar('orange') 
      } 
      .vertical(false) 
      .scrollable(true) 
      .fadingEdge(false) 
      .barMode(BarMode.Scrollable) 
      .barHeight(140) 
      .animationDuration(400) 
      .onChange((index: number) => { 
        console.info(index.toString()) 
      }) 
      .backgroundColor(0xF5F5F5) 
      .height(320) 
    }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 
  } 
}

      参考链接

      子页签样式SubTabBarStyle

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题