uni-app表单组件pick-view日滚动条显示错误

uni-app表单组件pick-view日滚动条显示错误

问题描述

详细问题描述（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

重现步骤
扫描H5版本uni-app体验二维码，选择表单组件pick-view,选择月滚动条，观察日滚动条（安卓apk，微信小程序也有这个问题）

结果
日滚动条可选择的最大值一直为31，不会因为2月份以及小月而改变（安卓apk，微信小程序也有这个问题）

期望
平年时，选择二月时，可选择的最大日为28，选择小月时，可选择的最大日为30，选择大月时，可选择的最大日为31。

闰年时，选择二月时，可选择的最大日为29，选择小月时，可选择的最大日为30，选择大月时，可选择的最大日为31。

环境信息

类别 信息
IDE HBuilderX App开发板
IDE版本 HBuilderX.1.6.2.20190220
Windows版本 Windows 10 企业版
Android版本 8.0.0
手机型号 小米 Mix1

附件

联系方式
QQ 541923225 图片


更多关于uni-app表单组件pick-view日滚动条显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

pick-view 是这个示例只是 模拟的时间选择，示例并没有去动态去算每列的区别。可以自己处理一下，不算bug 。

更多关于uni-app表单组件pick-view日滚动条显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的picker-view组件日期联动问题。根据你的描述，picker-view在月份变化时没有自动更新对应日期的最大值。

解决方案：

  1. 手动监听月份变化，动态设置日期范围
  2. 使用条件渲染重新初始化picker-view

示例代码：

data() {
  return {
    days: 31,
    month: 1,
    year: new Date().getFullYear()
  }
},
methods: {
  monthChange(e) {
    this.month = e.detail.value + 1;
    this.updateDays();
  },
  updateDays() {
    // 根据年月计算当月天数
    const daysInMonth = new Date(this.year, this.month, 0).getDate();
    this.days = daysInMonth;
  }
}

在模板中：

<picker-view [@change](/user/change)="monthChange">
  <!-- 月份选择器 -->
  <picker-view-column>
    <!-- 月份选项 -->
  </picker-view-column>
  
  <!-- 日期选择器 -->
  <picker-view-column>
    <view v-for="(item,index) in days" :key="index">{{index+1}}日</view>
  </picker-view-column>
</picker-view>
回到顶部