鸿蒙系列--组件介绍之Tabs组件

构造函数:

        Tabs(value: {barPosition?: BarPosition, index?: number, controller?: TabsController))

必须配合TabContent(内容视图) 子组件进行使用

参数:

  • barPosition设置Tabs的页签位置,跟vertical属性强关联
  • index设置初始页签索引
  • controller设置Tabs控制器,用于控制Tabs组件进行页签切换

属性:

  • vertical:设置Tabs方向是否为纵向,默认为false
  • barMode:TabBar布局模式
    • Fixed:所有TabBar平均分配宽度
    • Scrollable:TabBar实际布局宽度,当超过总长度后可以滑动 
  • barWidth:TabBar的宽度
  • barHeight:TabBar的高度

设置TabBar位置和排列方向,呈现不同的效果

  • 当barPosition为Start (默认值),vertical属性为false时(默认值),页签位于容器顶部,且横向排列
  • 当barPosition为Start (默认值) ,vertical属性为true时,页签位于容器左侧,且纵向排列
  • 当barPosition为End,vertical属性为false (默认值)时,页签位于容器底部,且横向排列

示例:

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tabs 包裹的组件生命周期包括以下几个阶段: 1. 创建阶段(Creation):在这个阶段,包括组件实例的创建和初始化。主要涉及到以下生命周期钩子函数: - beforeCreate:在实例初始化之前调用。 - created:在实例创建完成之后调用,此时实例已经完成数据观测(data observer)和事件配置(event/watcher)。 - beforeMount:在挂载开始之前调用,此时模板编译/挂载尚未开始。 2. 挂载阶段(Mounting):在这个阶段,组件将模板编译成虚拟 DOM,并将其挂载到页面上。主要涉及以下生命周期钩子函数: - beforeUpdate:在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。 - updated:在数据更新之后调用,发生在虚拟 DOM 重新渲染和打补丁之后。 - beforeDestroy:在实例销毁之前调用。此时实例仍然完全可用。 - destroyed:在实例销毁之后调用。此时所有的事件监听器都已被移除,所有的子实例也被销毁。 3. 更新阶段(Updating):在这个阶段,当组件的响应式数据发生变化时,会触发更新。主要涉及以下生命周期钩子函数: - beforeUpdate:在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。 - updated:在数据更新之后调用,发生在虚拟 DOM 重新渲染和打补丁之后。 需要注意的是,el-tabs 包裹的组件并没有独立的生命周期,而是依赖于其内部包含的子组件的生命周期。因此,el-tabs 的生命周期会受到内部组件生命周期的影响。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值