梅科尔工作室-HarmonyOS应用开发第二次培训(自定义组件实现底部导航栏)
目录1.准备相关文件及图片等1.1.准备文件1.2.在config.json中配置页面1.3.下载导航栏图标2.创建小组件2.1.在datas中创建小组件相关信息2.2.组件外观设计3.底部导航栏相关逻辑实现3.1.父组件向子组件传参3.1.1.为每一个页面下方导航栏添加参数index3.1.2.子组件接收父组件的参数3.1.3.实现选中切换图标3.2.实现点击跳转(1)在common下创建用来
·
目录
1.准备相关文件及图片等
1.1.准备文件
(1)在common下创建用来创建小组件的文件夹components并在下方创建tabbar组件页面
(2)在common下创建datas文件并创建tabbarItem.js文件用来存储导航栏组件相关信息(图标路径,value值,选中后图标路径)
(3)在common.pages下创建相关页面
1.2.在config.json中配置页面
1.3.下载导航栏图标
2.创建小组件
2.1.在datas中创建小组件相关信息(simg是选中后图标路径)
2.2.组件外观设计
3.底部导航栏相关逻辑实现
3.1.父组件向子组件传参
实现点击哪个页面,哪个页面下方导航栏对应图标变为选中图标
3.1.1.为每一个页面下方导航栏添加参数index
3.1.2.子组件接收父组件的参数
3.1.3.实现选中切换图标
如果页面id与导航栏对应id一样,选择选中对应图标,类似于c语言问号表达式。
idx图标id从0,开始。
index传入的页面的导航栏对应id,可以自己设置,如果第一个页面index设置了“1”,下图应该为
$idx == index - 1
3.2.实现点击跳转(路由)
导入router函数
在跳转函数中写入相应不同图标选择的页面
jump(index){ switch(index){ case 0: router.push({ uri:"pages/index/index", params:{ info:"首页" } });break; case 1: router.push({ uri:"pages/people/index", params:{ info:"联系人" } });break; case 2: router.push({ uri:"pages/find/index", params:{ info:"发现" } });break; case 3: router.push({ uri:"pages/me/index", params:{ info:"我的" } });break; } }
其中params中info值可以在相应页面直接使用
更多推荐
已为社区贡献4条内容
所有评论(0)