微信小程序 vant weapp样式出错 效果不实现 添加自定义样式

总结了几种样式出错可能的情况:

1. 修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

2.审查元素 

微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第1张图片

发现样式van-card 与 组件库 显示不一致 检查了代码用法是正确的

审查元素 发现 class=“vant-header”并没有加上  看了一下 vant-header里只有 display:flex

微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第2张图片

 找到对应的nodemodel

微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第3张图片

 发现这里有card—header 但是审查元素没有发现微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第4张图片

 我们手动给他加上 自定义 flex 样式

 

 最重要的一步!!

微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第5张图片

我们需要构建npm 这里修改的样式才会生效 需要构建npm!!

微信小程序 vant weapp样式出错 效果不实现 添加自定义样式_第6张图片

这样就能看到我们修改后的样式了 显示正确 

你可能感兴趣的:(微信小程序,微信小程序,小程序,css)