小程序使用vant组件样式不生效【踩坑日记】

最新推荐文章于 2024-04-20 19:26:42 发布
最新推荐文章于 2024-04-20 19:26:42 发布
阅读量7.9k 收藏 8
点赞数 11
文章标签： 小程序 微信小程序 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45878060/article/details/122222400
版权

小程序使用vant组件样式不生效【踩坑日记】
如下图这样，npm构建没有任何问题，引入也没问题，但是组件就是不生效，显示出来是个按钮，但是没有颜色。
在这里插入图片描述
其实解决方法很简单，找到app.json，然后删掉懒加载的配置即可正常渲染
在这里插入图片描述
删除之后，完美运行
在这里插入图片描述

任胖子丶
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
引用vant cdn 组件 van-cascader 没有效果
qq_42877655的博客
12-29 2302
原因：引用cdn版本太低 https://vant-contrib.gitee.io/vant/#/zh-CN/cascader 在其介绍里面有说2.12之后的版本可以，教程里面的也是2.12，但是不行所以我就在想是不是2.12之后，而不包括2.12 请在vant得更新版本里面找到最新版本 https://vant-contrib.gitee.io/vant/#/zh-CN/changelog 我的是v2.12.37 教程给的是vant@2.12 <!-- 引入样式文件 --> <link
小程序引入vant组件（已解决）
01-03
写在之前：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行npm init写入package.json文件 第一步：npm i vant-weapp -S --production ，接着点击工具的构建npm 第二步： 我找到方法了，你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到 miniprogram_npm/vant
微信小程序使用vant但是样式不生效,解决方法
pickinguptrash的博客
09-12 710
官方文档有说明，将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
Vant 组件没有效果
最新发布
忘忧
04-20 198
Vant 组件局部引用不生效
微信小程序使用vant组件样式未生效解决办法
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-28 2420
首先在app.json里面删除这一行。清除缓存 重新编译，重新构建npm 重新编译
Vant组件样式没有生效
Ljm_的博客
12-28 6229
昨天在学习Vant组件库的时候遇到一个问题； 我在main.js中引入了vant，也注册到了Vue中； 因为我使用的是自动按需导入, 那么就要配置babel.config.js, 如图; 但是在运行的时候vant的样式却没有生效, 相当于写了HTML+CSS, 但是CSS却没生效； 在网上查阅了相关资料，有人说要在main.js写上import 'vant/lib/index.css', 但是我写上之后还是没有生效，于是在vant的文档里看了下，这是另一种导入的方法，而且也确实没有生效，那么与...
uniapp 开发的支付宝小程序修改子组件样式无效的解决方法
LzzMandy的博客
12-20 1673
想要的样式： 实际样式： 出现原因：我把下面的代码写在了@import 'home.scss';中 /deep/ .title-bar{ height: auto!important; .nav-action{ background: none; .btn-search{ margin: 0; } } } 应该直接放在当前页的下面就起作用了 <style lang="scss" scope...
通过cdn引入vant，van-swipe-cell没有效果
扮老虎的猪
06-03 2587
前言 最近接手一个项目，是h5多页面，页面中使用了vant的一些插件，是通过cdn的方式引入样式和js的。使用
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
小程序使用vant组件库；构建npm，附源码
06-29
使用vant组件库的小程序demo
vant组件小程序版 适用小程序
09-01
vant组件小程序版 适用各类小程序
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
vant 的 Cascader 级联选择 组建css样式错乱问题修复
橙-极纪元-cplvfx-JJY.Cheng
06-29 1350
vant 的 Cascader 级联选择 组建css样式错乱问题修复
小程序页面嵌套自定义组件无法修改vant-weapp样式的问题
github_54195343的博客
09-30 2466
嵌套在页面中的自定义组件使用了vant，如果想修改嵌套在深层的vant样式，不能在组件内修改，而要到父页面中去修改
微信小程序-模拟器某些页面空白-引用 VantUI 后，页面空白
头发浓密的萌新的博客
03-09 1146
解决 微信小程序-模拟器某些页面空白-引用 VantUI 某些组件后，页面空白 的问题。
小程序使用有赞van-switch自定义active-value时遇到的坑
u010611409的博客
12-08 987
<van-cell title="实名制购票"> <van-switch checked="{{ isRealName }}" name="isRealName" value="{{isRealName}}" active-value="{{1}}" inactive-value="{{0}}" bind:change="isRealName" size="42rpx" /> </van-cell> 数据类型必须要一致,要主要是active-val.
vant-swipe无法切换内容
weixin_43955988的博客
09-22 806
记录：好像是父级的display：flex的相关属性所导致的。后面删掉就可以了。
开发小程序使用 vant 遇到的坑
前端小白成长记
07-13 2104
uni-app 开发微信小程序使用 vant 遇到的坑
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 在需要使用vant组件的页面中，按需引入所需的组件。例如，在某个页面的`<script>`标签中可以这样引入Button组件： ```javascript import { Button } from 'vant'; export default { components: { [Button.name]: Button } } ``` 4. 在页面的模板中，使用引入的vant组件即可。例如，可以在模板中使用Button组件： ```html <template> <div> <van-button type="primary">按钮</van-button> </div> </template> ``` 通过以上步骤，你就可以在uni-app小程序中使用vant组件了。当然，除了Button组件外，你还可以按照同样的方式引入和使用vant提供的其他组件。希望对你有帮助！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值