ant mobile design组件库的PickerView组件不能滑动

2024-09-06 20:44

本文主要是介绍ant mobile design组件库的PickerView组件不能滑动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题

PickerView组件在开发环境可滑动,在测试环境不可滑动

  • 正常开发环境是这样正常显示,并且可滑动的
    在这里插入图片描述

  • 发到测试环境后,变成了这样,并且只有中间那列可滑动,两边的都不能滑动,而且还会报警告
    在这里插入图片描述

  • 封装的组件代码如下

// 日期选择组件
const CustomDatePickerView: FC<any> = ({customizeTab,setCustomizeTime,customizeTime
}) => {const [value, setValue] = useState<number[]>(transformDateToArray(customizeTime[customizeTab]));const [days, setDays] = useState<any>([]);useEffect(() => {// 在组件加载时设置初始值console.log(111, customizeTime, customizeTab, value[0], value[2]);updateDays(value[0], value[2]); // 设置天数列// sessionStorage.setItem('isFirst', '1');}, []);useEffect(() => {setValue(transformDateToArray(customizeTime[customizeTab]));}, [customizeTab]);const months = [{ label: 'January', value: 0 },{ label: 'February', value: 1 },{ label: 'March', value: 2 },{ label: 'April', value: 3 },{ label: 'May', value: 4 },{ label: 'June', value: 5 },{ label: 'July', value: 6 },{ label: 'August', value: 7 },{ label: 'September', value: 8 },{ label: 'October', value: 9 },{ label: 'November', value: 10 },{ label: 'December', value: 11 }];const years = Array.from({ length: 100 }, (_, i) => ({label: `${dayjs().year() - 50 + i}`,value: dayjs().year() - 50 + i}));const updateDays = (month, year) => {const daysInMonth = dayjs(`${year}-${month + 1}`).daysInMonth();const newDays = Array.from({ length: daysInMonth }, (_, i) => ({label: `${i + 1}`,value: i + 1}));setDays(newDays);};const onChange = debounce(val => {const [selectedMonth, selectedDay, selectedYear] = val;if (selectedMonth !== value[0] || selectedYear !== value[2]) {// 动态更新天数列updateDays(selectedMonth, selectedYear);}// 确保日期选项在天数列更新时不越界const daysInSelectedMonth = dayjs(`${selectedYear}-${selectedMonth + 1}`).daysInMonth();if (selectedDay > daysInSelectedMonth) {val[1] = daysInSelectedMonth;}setValue(val);customizeTime[customizeTab] = transformDate(dayjs(`${selectedYear}-${selectedMonth + 1}-${selectedDay}`));setCustomizeTime([...customizeTime]);// }}, 500);return (<PickerViewclassName="!bg-[#27292F]"columns={[months, days, years]}value={value}onChange={onChange}style={{ '--item-font-size': '20px' }}/>);
};

最终发现可能导致的原因是在本地开发环境会触发两次useEffect,所以传入的columns应该没什么问题,而测试环境是只触发一次,打断点的时候发现days这个值不对
解决办法就是 加了一个days.length 的判断就可以了,

days.length && (<PickerViewclassName="!bg-[#27292F]"columns={[months, days, years]}value={value}onChange={onChange}style={{ '--item-font-size': '20px' }}/>)

这篇关于ant mobile design组件库的PickerView组件不能滑动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1143070

相关文章

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

电脑软件不能安装到C盘? 真相颠覆你的认知!

《电脑软件不能安装到C盘?真相颠覆你的认知!》很多人习惯把软件装到D盘、E盘,刻意绕开C盘,这种习惯从哪来?让我们用数据和案例,拆解背后的3大原因... 我身边不少朋友,在使用电脑安装软件的时候,总是习惯性的把软件安装到D盘或者E盘等位置,刻意避开C盘。如果你也有这样的习惯,或者不明白为什么要这么做,那么我

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

vscode不能打开终端问题的解决办法

《vscode不能打开终端问题的解决办法》:本文主要介绍vscode不能打开终端问题的解决办法,问题的根源是Windows的安全软件限制了PowerShell的运行,而VSCode默认使用Powe... 遇到vscode不能打开终端问题,一直以为是安全软件限制问题,也没搜到解决方案,因为影响也不大,就没有管

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine