tab栏组件使用介绍

简介: tab栏组件使用介绍

小程序里可以在底部放置tab栏组件实现底部的导航菜单切换,有粉丝问,为啥我的导航条底部菜单切换不了呢?其实是没有设置对的原因,并不是组件的问题。我们看一下我开发的一个实战案例,小家电企业官网




首页放置了tab栏组件作为底部导航的效果,菜单的话一共是三个,首页、产品、加盟。我们配置tab栏一共有三个地方需要配置,第一部分是选中页面,这个设置决定了你这个页面进入后默认选中的是哪个页面。


因为我当前是首页,所以默认选中需要设置成首页

第二个需要设置的是布局模式,一般是选中第一种,上边是图标,下边是文字的模式


第三个是tab配置,就是菜单项,菜单项的话需要配置图标和文字,然后就是点击的时候哪个页面被选中


经过这三步配置一个菜单项就配置好了,其余页面配置的时候只需要将首页的组件复制过去,更改默认选中页面就可以了。


目录
打赏
0
0
0
0
15
分享
相关文章
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
215 0
|
7月前
|
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
361 1
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
267 0
|
7月前
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
44 0
|
9月前
自定义Tab选项卡
自定义Tab选项卡
47 2
|
9月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
|
9月前
NotePad++ 使用侧边栏列表替代Tab
NotePad++ 使用侧边栏列表替代Tab
187 0
element-plus 下拉框实现全选功能
element-plus 下拉框实现全选功能
1488 0
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
59 0