vant2 van-calendar手机端无法滑动,PC端可以滑动

本来挺简单的一个需求,要出一个h5的页面,头部可以切换时间类型进行筛选,来吧,so easy....

直接复制粘贴vant 官方的代码

<van-calendar v-model="show" type="range" @confirm="onConfirm" />

一看效果,挺好!就去写其他代码了.

前提: 我们公司比较特殊,只有原型图,没有UI稿,没有测试,今天出的原型,晚上就要发一版,而我们h5页面一般是报表展示,选时间的时候只能选过去的时间.

你看看,这问题不就来了吗..... 我复制的这段代码默认只能选未来的时间,我测的时候完全没有感觉到有问题.

第二天一早,老板发现了这个问题.找了产品经理,又找了项目经理,哦豁,我的脸已经红到了耳朵根,好羞愧.

马上改

    <van-calendar
        v-model="showDatePicker"
        :min-date="calendarMinDate"
        :max-date="calendarMaxDate"
        :max-range="7"
        type="range"
        @confirm="dateConfirm"
    />



    this.calendarMinDate = new Date(
      currentDate.subtract(6, "month").format("YYYY-MM-DD")
    );
    this.calendarMaxDate = new Date(
      currentDate.subtract(1, "day").format("YYYY-MM-DD")
    );

其实只用加个min-date 和max-date属性就行了,最大的日期是昨天,最小的日期是6个月前

但是又出现了一个另一个问题:

就是这段红框框里的代码,在PC端都好好的,可以选择时间,也可以滑动.但是,这段代码在手机上,日历就不能滚动,干巴巴的展示一小段日历,实在是不知道原因.

自己琢磨了一段时间后,还是不能搞定,算了,问度娘.

一言惊醒梦中人.....

原来是我把  van-calendar 组件写在了 van-overlay 标签里,解决方案是把  van-calendar 组件 单独提出来就行了.

恍然大悟,这个问题我以前遇到过,可惜时间久远,当时也没做记录.

今天,就让我解决掉这段小小小小的bug吧,把这段经历藏在这里,为他专门写了一篇日记,以后应该是不会再犯了