微信小程序中@vant/weapp的组件van-calendar及van-picker显示异常问题

最新推荐文章于 2025-06-02 09:02:17 发布

longlongValue

最新推荐文章于 2025-06-02 09:02:17 发布

阅读量1.6k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：日常日志文章标签：微信小程序小程序 vant weapp vant显示异常

本文链接：https://blog.youkuaiyun.com/longlongValue/article/details/135252444

日常日志专栏收录该内容

22 篇文章

订阅专栏

本文讲述了作者在处理新项目时遇到的小程序vant组件显示异常问题，涉及picker和calendar组件在不同环境下的显示问题，以及解决过程中尝试的技术路径和最终解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

新的紧急项目又来了，新的紧急项目又在年前来了，新的要求一个月内完成的紧急项目又在年前来了…（老板说了，做不完，过年给三工，不能走！！！）

前言

由于新的项目需求将来部署环境可能设计小程序及PC端，在技术选型的时候也增纠结过uniapp+uView2.0还是微信小程序原生+vant。当然了，从标题想必也看出来我选了什么了。本来以为会很顺利的将页面原型百分之九十九点九九九九…的还原出来，但是往往事非人愿，新建了小程序并集成了weapp vant以后，并非一帆风顺

过程

在某个页面使用到picker进行选择的时候，由于是在屏幕中间进行选择的，固使用了popup+picker的组合，当显示了toolbar的标题及按钮时，在模拟器上一切都很正常，但当预览的时候发现，上下两个toolbar！！！当我的心情就是：沃德法克？？？
曾怀疑是popup的问题，后发现隐藏toolbar就没问题了…后着急赶项目（赖的继续研究以为的组件bug）就隐藏了toolbar然后自定义了一个顺利解决该显示问题。
万万没想到的是，事情并没有因为绕过这个问题而结束。当用到calendar显示日历的时候…它在真机上就老老实实的平铺在页面下面，甚至还能滚动页面看到更多日期。联想到之前的picker问题…看来确实需要解决这个拦路虎了
在这里插入图片描述

在这里插入图片描述
一开始也曾怀疑是vant的版本问题，遂找了一个以前的项目vant版本修改并重新install构建npm…然并卵
后怀疑是project.config.json中配置问题，还是老项目，复制粘贴…还并卵
最后想到了升级skyline的提示以优化内容，将skyline设为false，还是不行。