TabBar 标签导航栏

TabBar _tabBar() {
  return TabBar(
    isScrollable: true,    // 是否可以滑动
    controller: controller,//需要显示tab表头的列表TabController(length: state.tabs.length, vsync: this);final tabs = ["待办事项", "通 知"];

    //tab文字类型
    unselectedLabelStyle:
        TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w500),
    //未选择样式
    labelStyle: TextStyle(fontSize: 17.sp, fontWeight: FontWeight.w500),
    //选择样式
    //选中的颜色
    labelColor: AppStyle.color1A1A1A,
    //未选中的颜色
    unselectedLabelColor: AppStyle.color666666,
    //自定义指示器
    indicator: BoxDecoration(
      border: Border.all(
        color: AppStyle.colorFFFFFF,
        width: 1.w,
      ),
    ),
    //文本偏移
    // labelPadding: EdgeInsets.only(left: 16,top: 15, right: 10),
    tabs: controller.state.tabNames.map((value) {
      return Center(child: Text(value));
    }).toList(),
  );
}

Vue3实现TabBar底部导航栏灵活组件的步骤如下: 1. 创建一个Vue组件,并定义需要的props属性,比如标签页列表、当前选中的标签页等。 2. 在组件中使用Vue3的Composition API,定义需要的状态和方法,比如当前选中的标签页索引、切换标签页的方法等。 3. 在组件的template中使用v-for指令渲染标签页列表,并使用v-bind指令动态绑定类名和样式。 4. 在组件中使用v-on指令绑定click事件,触发切换标签页的方法。 5. 在父组件中引用TabBar组件,并传入需要的props属性。 6. 在父组件中可以使用slot插槽,自定义每个标签页的内容。 7. 可以根据不同的需求,自定义TabBar组件的样式和动画效果。 示例代码如下: ```html <template> <div class="tab-bar"> <div v-for="(item, index) in tabs" :key="index" :class="{ 'tab': true, 'active': currentIndex === index }" @click="switchTab(index)"> {{ item.label }} </div> </div> <div class="tab-content"> <slot :name="tabs[currentIndex].name"></slot> </div> </template> <script> import { ref } from 'vue'; export default { name: 'TabBar', props: { tabs: { type: Array, required: true }, defaultIndex: { type: Number, default: 0 } }, setup(props) { const currentIndex = ref(props.defaultIndex); const switchTab = (index) => { currentIndex.value = index; }; return { currentIndex, switchTab }; } }; </script> <style> .tab-bar { display: flex; justify-content: space-around; align-items: center; height: 50px; border-top: 1px solid #ccc; background-color: #fff; } .tab { display: flex; justify-content: center; align-items: center; width: 20%; height: 100%; font-size: 14px; color: #333; cursor: pointer; transition: all 0.2s ease-in-out; } .active { color: #1890ff; } .tab-content { padding: 20px; background-color: #f5f5f5; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值