Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nut-date-picker组件中自定义filter和min-date、max-date同时存在时导致滚动选中错乱,闪烁,相互影响,回弹的问题 #2269

Closed
Super-chen-big opened this issue May 4, 2023 · 2 comments · Fixed by #2824
Labels
bug reproducible 提供了可复现代码,或者已验证可复现

Comments

@Super-chen-big
Copy link

NutUI scenes(nutui 场景)

小程序(@nutui/nutui-taro)

NutUI-vue version(nutui-vue 版本)

4.0.4

Vue version(vue 版本)

3.2.40

Operating environment(运行环境)

dev:weapp

Citation method(引用方式)

npm

Node version(node 版本)

16.15.0

Browser and its version(浏览器及其版本)

微信开发者工具(最新),基础库为2.25.4

System and its version(系统及其版本)

win10

Taro environmental information(taro 环境信息)

Taro CLI 3.6.4 environment info:
System:
OS: Windows 10 10.0.19044
Binaries:
@tarojs/plugin-platform-qq: 3.6.4 => 3.6.4
@tarojs/plugin-platform-swan: 3.6.4 => 3.6.4
@tarojs/plugin-platform-tt: 3.6.4 => 3.6.4
@tarojs/plugin-platform-weapp: 3.6.4 => 3.6.4
@tarojs/runtime: 3.6.4 => 3.6.4
@tarojs/shared: 3.6.4 => 3.6.4
@tarojs/taro: 3.6.4 => 3.6.4
@tarojs/webpack5-runner: 3.6.4 => 3.6.4
babel-preset-taro: 3.6.4 => 3.6.4
eslint-config-taro: 3.6.4 => 3.6.4

Reproduction link(重现链接)

github.com

Steps to reproduce(重现步骤)

1、克隆下来项目
2、yarn add 安装所有依赖
3、yarn dev:weapp 在微信开发者工具中查看
4、/src/pages/index/index.vue 文件中尝试修改(是否添加filter属性)和min-date、max-date

What is expected?(期望的结果是什么?)

1、根据min-date和max-date限制筛选的日期(正常)
2、根据filter过滤显示时间选项(正常)
3、正常选中,流畅不闪烁,无其他负面影响

What is actually happening?(实际的结果是什么?)

1 和2结合起来就出现奇怪的内容了,不能流畅的获取时间,滚动选中某一列会初始化其他列(列之间相互影响),滚动选中会闪烁偶尔无效,部分时间比如最后一天,可能会导致页面小时列不显示内容,再次切换到其他日期也不会回复。

@Super-chen-big
Copy link
Author

image
image

临界值状态下会导致显示不全,11月1日没有显示对应的小时列,再次切换回其他年月会出现1、无法切换。2、和当前情况相同,即使切换了年月日,照样不显示小时列。

@Super-chen-big
Copy link
Author

补充一下:尝试了官网组件的代码,没有出现上面问题,对比不同之处。经过了若干次尝试修改
const filter = (type: string, options) => {
if (type == 'hour') {
return options.filter((option) => Number(option.value)%6==0)
}
console.log(type,options)
return options;
};
const filter = (type: string, options) => {
if (type == 'hour') {
return options.filter((option) => Number(option.value)>6&&Number(option.value)<10)
}
console.log(type,options)
return options;
};
发现这个自定义过滤函数,如果改为了包含比较(相等除外)的运算,就会出现滚动不好选中,回弹的情况

@eiinu eiinu added bug reproducible 提供了可复现代码,或者已验证可复现 labels May 25, 2023
@eiinu eiinu added this to the v4.0.10 milestone Jun 14, 2023
@eiinu eiinu modified the milestones: v4.0.10, v4.1.1 Jul 13, 2023
@eiinu eiinu removed this from the v4.1.1 milestone Sep 6, 2023
@eiinu eiinu linked a pull request Jan 10, 2024 that will close this issue
21 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug reproducible 提供了可复现代码,或者已验证可复现
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants