当前栏目
微搭低代码从入门到精通10-tab栏组件
在小程序中,如果你的页面是由多个组成的,往往涉及到页面切换的问题。那如何引导用户访问不同的页面呢?微搭中提供了tab栏组件来实现这个功能,本篇我们介绍一下这个组件的使用方法。
首先呢打开我们的应用编辑器,在左侧的组件区域找到tab栏组件,将组件拖入到页面编辑区
研究一个组件的用法通常包含三个部分内容,属性、样式和事件
tab栏组件的布局模式一共是分成三种图文的,只有图标的,只有文字的
通常为了提供程序功能的辨识度,我们选择第一种图标+文字的模式
涉及到图标的就需要有设计师参与,由设计师来完成图标的制作,我们作为开发人员只需要把提供好的资源上传即可
但通常我们一个是没有对应的预算,另外可能也找不到会这项技能的人。可以在互联网搜索一下免费的资源库。我比较喜欢使用的就是iconfont,里边有免费的素材可以下载
选择好图标后,我们通常需要下载两种颜色的素材,一种是选中后的效果一种是未选中的效果
至于需要哪种颜色,通常需要学习一定的配色知识。我经常说技术和艺术是相通的,要想做好小程序,也是需要有一点美术的功底,不见得我们自己做出好看的图标来,但是把颜色搭配好也是必须的。
当你将素材下载好之后,我们就可以将素材上传到微搭里。微搭提供了素材管理的功能,在我们应用编辑器的左侧导航栏找到素材的图标,进行上传
tab栏组件的菜单内容需要在标签列表里维护
如果你的功能是固定的,那么可以直接点击某个标签进行修改
默认是从图标库里选择图标,我们也可以使用自己的素材,点击内置样式,我们切换成自定义模式
切换到自定义模式后就可以从素材库里直接选择素材了
颜色搭配上我们通常选中选择一些亮色,未选中选择一些暗色。tab栏组件默认点击图标的时候可以跳转到相应的页面,这里跳转到需要选择对应的页面。
在页面跳转时候还可以携带参数,通常我们的底部导航不建议携带参数,从产品规划上你不同的菜单是不同的业务,并不需要先从上一个页面选中某个参数带入到下一个页面中。
还有就是组件初始化后需要选中一个页面,我们通常都选择首页
还有就是菜单的文字也需要设置对应的颜色,通常是在高级属性中进行设置
一般我们的tab栏组件只是用来切换功能使用,很少设置change事件
总体上看,tab栏组件的使用还是非常简单的,只需要设置一些基本的属性即可。难点是在设计上,如果设计出好看和实用的图标,还有颜色要和你的小程序的整体风格相符合。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?