OpenHarmony JS UI小型系统自定义控件(1)—tab页签容器 原创 精华
NL_AIDC_XJS
发布于 2022-4-1 08:57
浏览
1收藏
一、目标
使用小型系统支持的基础控件实现tab页签容器。
二、背景
OpenHarmony 标准系统中有tabs容器,在标准系统中tabs是一种常见的界面导航,通过页签容器,用户可以快捷地访问应用的不同模块,但在小型系统中没有提供tab页签容器,目前的需求是在L1设备上实现类似于tabs页签容器的功能。
三、环境
设备:君正x2000开发板
系统:OpenHarmony 3.0.0.0(LTS)
四、效果
4.1视频效果
4.2效果截图
五、实现思路
从效果图中我们可以看出,tab页签容器包括:
1、可切换的菜单;
2、可切换的内容容器。
分析:小型系统所支持的基础容器中,菜单可以通过基础容器(div)+文本容器(text)组合实现;可切换的内容容器可以通过滑动容器(swiper)实现;在将菜单容器的点击事件click与滑动容器切换时的回调事件change事件结合互联就可以实现一个自定义的tab页签容器。
备注:如果你对上面提到的容器API还不熟悉,可以参看以下内容:
六、完整代码
说明:组件的代码包括三个部分:hml、css、js,因为代码比较简单,所以没有写注释,如果有不明白的地方可以留言。
七、感谢
如果您能看到最后,还希望您能动动手指点个赞,一个人能走多远关键在于与谁同行,我用跨越山海的一路相伴,希望得到您的点赞。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-1 10:05:00修改
赞
4
收藏 1
回复
4
2
1
相关推荐
能逛淘宝感觉已经非常实用了!
抱歉,淘宝只是图片 WWW...