uTools圆进度条层级太高？用这招搞定！

不再害怕uni-app圆形进度条层级过高

前言

uni-app因其跨平台开发能力深受开发者喜爱，然而在使用uview的圆形进度条时，可能会遇到层级过高的问题。本文将深入探讨这个问题，提供详细的解决方案，并分享踩坑过程，帮助开发者轻松解决层级问题。

一、层级过高的原因

uni-app中的圆形进度条使用canvas实现，而canvas默认的层级为最高。当与自定义导航栏等元素并存时，就会出现层级冲突，导致圆形进度条覆盖在其他元素之上。

二、解决方法

为了降低圆形进度条的层级，需要修改uview的样式。具体步骤如下：

1. 定位样式属性

在项目中找到uview样式文件，通常位于node_modules/uview-ui/dist/style/index.css。找到圆形进度条的样式，通常是.u-progress。将position属性设置为absolute，以相对父元素定位。

2. 降低层级属性

在.u-progress样式中，添加z-index属性并将其设置为一个较低的数字，例如10。这将降低圆形进度条的层级。

3. 消除变形问题

由于position属性的修改，圆形进度条可能会变形。为了解决这个问题，需要添加transform属性，设置为translateZ(0)。这将消除变形，同时保持低层级。

.u-progress {
  position: absolute;
  z-index: 10;
  transform: translateZ(0);
}

三、踩坑过程

在解决过程中，我遇到了以下几个坑点：

1. z-index不起作用

最初尝试修改z-index属性，但发现不起作用。原因是圆形进度条使用position: absolute属性，此时z-index属性无效。

2. position: fixed导致异常

为了让z-index属性生效，尝试将position属性修改为fixed。然而，这导致圆形进度条固定在视口位置，而不是相对于父元素定位，从而导致显示异常。

3. transform导致变形

最后尝试添加transform属性，解决了层级问题。但同时遇到了变形问题。通过将transform属性设置为translateZ(0)，不仅消除了变形，还保持了低层级。

四、总结

通过修改uview的样式，具体来说是position、z-index和transform属性，可以有效降低圆形进度条的层级，解决与自定义导航栏等元素的冲突问题。需要注意的是，踩坑过程中的经验教训将帮助开发者避免不必要的弯路。

常见问题解答

1. 为什么canvas的层级默认为最高？

因为canvas使用GPU进行渲染，而GPU渲染的元素通常具有更高的优先级。

2. 修改样式文件后需要重新运行项目吗？

是的，修改样式文件后需要重新运行项目，以应用修改后的样式。

3. 为什么添加transform属性后圆形进度条不会变形？

translateZ(0)属性将圆形进度条移动到z轴方向的0位置，消除了因position: absolute属性导致的变形。

4. 如果修改样式文件后仍然出现问题怎么办？

请检查修改是否正确，并且确保项目已重新运行。如果问题仍然存在，可以尝试查看控制台日志或使用开发工具调试。

5. 是否有其他方法降低圆形进度条的层级？

除了修改样式文件之外，还可以使用CSS变量或JavaScript动态控制层级。然而，这些方法可能更复杂，并且对于初学者来说可能不太容易理解。