uni-app nvue页面修改uni-app组件样式不生效

uni-app nvue页面修改uni-app组件样式不生效

操作步骤:

在nvue中需要修改 slider组件里的滑块样式,将样式写在App.vue中时,nvue页面不生效,vue页面是生效的。

预期结果:

在nvue中生效

实际结果:

在nvue中不生效

bug描述:

在nvue中需要修改 slider组件里的滑块样式,将样式写在App.vue中时,nvue页面不生效,vue页面是生效的。

image

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.9
手机系统 Android
手机系统版本号 Android 10
手机厂商 OPPO
手机机型 PBEM00
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue页面修改uni-app组件样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue页面修改uni-app组件样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中,样式作用机制与 vue 页面不同,因为 nvue 使用原生渲染,样式支持受限且作用域独立。App.vue 中的全局样式默认不会作用于 nvue 页面的组件。

解决方案:

  1. 在 nvue 页面内直接编写样式:将 slider 的自定义样式直接写在当前 nvue 页面的 <style> 标签中,确保样式作用域正确。
  2. 使用条件编译:若需跨页面共享样式,可在 nvue 页面通过条件编译引入样式,例如:
    /* #ifdef APP-NVUE */
    .custom-slider {
      /* 你的样式 */
    }
    /* #endif */
回到顶部