实战,现在还差下面的列表和 底部的bar
6-1 创建底部 TabBar(1)
现在只有热门,里面点击男装是没有东西的
6-1 创建底部 TabBar(1)

6-1 创建底部 TabBar(1)
和上面比较相似,只不过不可以滚动,没有小红条。这样我们就可以重构我们的组件。
6-1 创建底部 TabBar(1)
在src/assets/tabs准备好了10张图片。
6-1 创建底部 TabBar(1)
浏览器汇总实际上只有5个tab。但是它有选中的状态的效果。
6-1 创建底部 TabBar(1)
在shared下创建footer
6-1 创建底部 TabBar(1)

导出这个组件
6-1 创建底部 TabBar(1)
components下的index.ts进一步导出
6-1 创建底部 TabBar(1)
模块中声明
6-1 创建底部 TabBar(1)
再导出去
6-1 创建底部 TabBar(1)

tabbar应该放在根组件当中。
6-1 创建底部 TabBar(1)
复制之前的代码
6-1 创建底部 TabBar(1)
复制到我们的footer组件
6-1 创建底部 TabBar(1)
不能滚动。所以让它显示的列和整体的列一样。这样他就不能滚动了。
6-1 创建底部 TabBar(1)
我们在组件是这样写的,只有列数大于显示的列才能滚动
6-1 创建底部 TabBar(1)0

构建数据。新建domain的文件夹。
6-1 创建底部 TabBar(1)

创建类的接口
6-1 创建底部 TabBar(1)
title单词写错了 重新改一下
6-1 创建底部 TabBar(1)

增加一个选中的属性。默认为0,选中第一个菜单。

6-1 创建底部 TabBar(1)

如果索引相同,那么就是选中的样式。否则就是默认的样式。
6-1 创建底部 TabBar(1)
点击事件,传入当前的索引
6-1 创建底部 TabBar(1)

点击页面进行跳转

我们要把选中的哪一个传出去,让父组件实现路由的跳转。
6-1 创建底部 TabBar(1)
EventEmitter要从angular core中选中。
6-1 创建底部 TabBar(1)
事件的处理当中,我们要把它发射出去。
6-1 创建底部 TabBar(1)
把元素发射出去。把选中的tabIndex发射出去。
6-1 创建底部 TabBar(1)
设置组件为笨组件。
6-1 创建底部 TabBar(1)
也是从angular/core中引用。
6-1 创建底部 TabBar(1)

 

结束

 

相关文章:

  • 2021-09-28
  • 2021-12-07
  • 2021-12-18
  • 2021-10-30
  • 2022-12-23
  • 2022-12-23
  • 2021-09-06
  • 2021-11-20
猜你喜欢
  • 2021-11-30
  • 2021-11-29
  • 2021-07-15
  • 2021-06-27
  • 2022-12-23
  • 2021-09-22
  • 2022-12-23
相关资源
相似解决方案