• 6-1 创建底部 TabBar(1)


    实战,现在还差下面的列表和 底部的bar

    现在只有热门,里面点击男装是没有东西的

    首先实现底部的tabBar


    和上面比较相似,只不过不可以滚动,没有小红条。这样我们就可以重构我们的组件。

    在src/assets/tabs准备好了10张图片。

    浏览器汇总实际上只有5个tab。但是它有选中的状态的效果。

    在shared下创建footer


    导出这个组件

    components下的index.ts进一步导出

    模块中声明

    再导出去


    tabbar应该放在根组件当中。



    复制之前的代码

    复制到我们的footer组件



    不能滚动。所以让它显示的列和整体的列一样。这样他就不能滚动了。

    我们在组件是这样写的,只有列数大于显示的列才能滚动
    0

    构建数据。新建domain的文件夹。




    创建类的接口



    title单词写错了 重新改一下


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







    如果索引相同,那么就是选中的样式。否则就是默认的样式。

    点击事件,传入当前的索引




    点击页面进行跳转

    我们要把选中的哪一个传出去,让父组件实现路由的跳转。

    EventEmitter要从angular core中选中。



    事件的处理当中,我们要把它发射出去。

    把元素发射出去。把选中的tabIndex发射出去。

    设置组件为笨组件。


    也是从angular/core中引用。


     

    结束

  • 相关阅读:
    Bit命令
    Leetcode628. 三个数的最大乘积
    MyBatis中一级缓存和二级缓存
    Docker学习-实战MySQL数据同步
    Docker学习-容器数据卷的使用
    我的健康计划【要常看啊】
    ASCII编码对照表
    KMP算法详解
    Docker学习-制作一个自己的镜像
    Docker学习-Docker镜像的分层原理
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/13591982.html
Copyright © 2020-2023  润新知