uni-app的NVUE页面BUG 子页面返回后 主页面的滚动条组件有阴影透明底色 猜测是焦点色

在 uni-app 中使用 NVUE 页面时，确实可能会遇到一些渲染或样式上的问题。你提到的子页面返回后，主页面的滚动条组件出现阴影或透明底色的情况，可能与焦点状态或样式未正确重置有关。以下是一些可能的原因和解决方法：

可能原因：

1. 焦点状态未重置：在子页面返回时，主页面中的某些元素可能仍然保持焦点状态，导致样式异常。
2. 样式冲突：NVUE 页面的样式可能与原生渲染引擎的默认样式冲突，导致滚动条出现异常。
3. 渲染引擎问题：NVUE 使用原生渲染引擎，可能存在一些渲染上的 BUG 或未处理的边缘情况。

解决方法：

1. 手动重置焦点状态：

   • 在子页面返回时，手动将主页面的焦点状态重置。可以通过调用 blur() 方法来移除焦点。

   // 在子页面的返回事件中
   uni.navigateBack({
     success: () => {
       // 获取主页面的滚动条元素并移除焦点
       const scrollElement = document.querySelector('.your-scroll-element');
       if (scrollElement) {
         scrollElement.blur();
       }
     }
   });
   

2. 检查样式：

   • 确保主页面的滚动条样式没有与子页面的样式冲突。可以通过 scoped 样式或手动检查样式表来避免冲突。
   • 如果问题是由于滚动条的默认样式引起的，可以尝试自定义滚动条样式。

3. 使用 nvue 的 scroll-view 组件：

   • 如果问题出现在原生滚动条上，可以尝试使用 nvue 提供的 scroll-view 组件来替代默认的滚动行为，并自定义其样式。

   <scroll-view class="your-scroll-view" scroll-y>
     <!-- 页面内容 -->
   </scroll-view>
   

4. 更新 uni-app 版本：

   • 确保你使用的是最新版本的 uni-app 和相关依赖。开发者可能已经修复了类似的 BUG。

5. 反馈给官方：

   • 如果以上方法都无法解决问题，建议将问题反馈给 uni-app 官方团队。可以通过 GitHub Issue 或官方论坛提交问题，附上详细的复现步骤和代码示例。

示例代码：

// 子页面返回时重置焦点
uni.navigateBack({
  success: () => {
    const scrollElement = document.querySelector('.your-scroll-element');
    if (scrollElement) {
      scrollElement.blur();
    }
  }
});

<!-- 使用 scroll-view 组件 -->
<scroll-view class="your-scroll-view" scroll-y>
  <!-- 页面内容 -->
</scroll-view>

/* 自定义滚动条样式 */
.your-scroll-view::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

.your-scroll-view::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}