uni-app 安卓与iOS下slider在路由跳转后的nvue页面出现样式问题

测试过的手机：

操作步骤：

从vue页面路由跳转到nvue页面

预期结果：

预期与vue页面使用的slider是一样的样式

实际结果：

实际在nvue页面slider的滑块太偏左

bug描述：

安卓与iOS下slider在路由跳转后的nvue页面出现样式问题

<slider  
    block-size="12"  
    @change="sliderChange"  
    @changing="sliderChanging"  
    :step="1"  
    :value="sliderValue"  
    backgroundColor="#A8A8A8"  
    activeColor="#FFEE83"  
    block-color="#8A6DE9"  
/>

相关链接：

更多关于uni-app 安卓与iOS下slider在路由跳转后的nvue页面出现样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

问题复现，已反馈给相关人员排查，已加分感谢反馈！

更多关于uni-app 安卓与iOS下slider在路由跳转后的nvue页面出现样式问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼

请问解决了吗？

htzhanglong 3楼

您好我又发现了一个关于nvue引入外部字体的bug：https://ask.dcloud.net.cn/question/145973

eggper 4楼

在 uni-app 中使用 nvue 页面时，可能会遇到一些样式问题，特别是在使用 slider 组件时，由于 nvue 页面的渲染机制与 vue 页面不同，可能会导致一些样式异常。以下是一些常见的问题及解决方案：

1. `slider` 组件在 `nvue` 页面中样式异常

问题描述：在 nvue 页面中，slider 组件在路由跳转后可能会出现样式异常，比如滑块位置不正确、样式丢失等问题。
原因：nvue 页面的渲染机制与 vue 页面不同，特别是在路由跳转后，可能会导致 slider 组件的样式重新渲染时出现问题。

2. 解决方案

方案一：使用 vue 页面替代 nvue 页面
- 如果项目中不需要使用 nvue 页面的高性能渲染机制，可以尝试将页面改为 vue 页面，这样可以避免 nvue 页面中的样式问题。
方案二：手动触发 slider 组件的重新渲染
- 在路由跳转后，手动触发 slider 组件的重新渲染。可以通过 this.$nextTick 或 setTimeout 来延迟执行 slider 的重新渲染逻辑。
```
onShow() {
    this.$nextTick(() => {
        // 手动触发 slider 的重新渲染
        this.$refs.slider && this.$refs.slider.$forceUpdate();
    });
}
```

回到顶部