基于此进度条重复使用频率较高可以简单封装一下
1.在根目录下创建组件
$ ionic g component progress-bar(可以随意起名字)创建成功后,会自动导入到components.module文件,如果自定义的组件需要用到ionic的组件,则需要在此引入IonicModule
2.修改html(根据需求修改)直接上代码
3 scss文件
3.1
3.2
4 接下来ts文件(小白一枚垃圾代码有点多欢迎大佬指正)
4.1
4.2
4.3
5 调用
如果调用的页面不是懒加载页面,则在app.module导入
如果调用的页面是懒加载页面,则在页面对应的xxx.module导入
6.在需要用进度条的页面(html)引入
最终效果图 (会有动画效果)
欢迎大佬指正 小白一枚 一起学习!