tab栏组件使用介绍

简介: tab栏组件使用介绍

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




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


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

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


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


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


相关文章
|
6月前
自定义Tab选项卡
自定义Tab选项卡
32 2
|
6月前
NotePad++ 使用侧边栏列表替代Tab
NotePad++ 使用侧边栏列表替代Tab
150 0
|
前端开发 JavaScript API
使用.LayUI实现动态选项卡Tab的强大功能
使用.LayUI实现动态选项卡Tab的强大功能
106 0
|
iOS开发 MacOS Windows
使用 Tab 键快速切换对话框按钮 | 一日一技
使用 Tab 键快速切换对话框按钮 | 一日一技
500 0
Vant3—— 点击对应的name名称跳转到下一页对应的tab栏的name的位置
点击对应的name名称跳转到下一页对应的tab栏的name的位置
226 0
|
移动开发 JavaScript 前端开发
通过Vue 完成简单的tab栏切换
主体通过绑定事件,索引的利用,v-for的数组遍历,来实现的切换效果。具体细节看代码段的解释,根据个人所需去了解一下,更多的是入门理解其中的细思。
243 0
通过Vue 完成简单的tab栏切换
JavaScrip - tab栏切换案例
JavaScrip - tab栏切换案例
115 0
|
前端开发 索引
前端实现tab栏切换,这么常见的案例你学会了吗?
tab栏切换制作是我们web开发中一个十分常见的案例,今天在这里写写,希望对大家有所帮助,还是要用到我们上节写到的排他思想!好好学哦!
983 0
前端实现tab栏切换,这么常见的案例你学会了吗?
Tab动画菜单
在线演示 本地下载
788 0