当前位置: 代码迷 >> 综合 >> mac下 ionic3 自定义横向进度条渐变色设置
  详细解决方案

mac下 ionic3 自定义横向进度条渐变色设置

热度:72   发布时间:2023-12-29 07:00:56.0

基于此进度条重复使用频率较高可以简单封装一下

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)引入

 

最终效果图 (会有动画效果)

欢迎大佬指正 小白一枚 一起学习!