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

相关文章

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用

基于Redis有序集合实现滑动窗口限流的步骤

《基于Redis有序集合实现滑动窗口限流的步骤》滑动窗口算法是一种基于时间窗口的限流算法,通过动态地滑动窗口,可以动态调整限流的速率,Redis有序集合可以用来实现滑动窗口限流,本文介绍基于Redis... 滑动窗口算法是一种基于时间窗口的限流算法,它将时间划分为若干个固定大小的窗口,每个窗口内记录了该时间

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理,在有一定基础认识的前提下,通过阅读kubelet源码,对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除

火语言RPA流程组件介绍--浏览网页

🚩【组件功能】:浏览器打开指定网址或本地html文件 配置预览 配置说明 网址URL 支持T或# 默认FLOW输入项 输入需要打开的网址URL 超时时间 支持T或# 打开网页超时时间 执行后后等待时间(ms) 支持T或# 当前组件执行完成后继续等待的时间 UserAgent 支持T或# User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器

解决Office Word不能切换中文输入

我们在使用WORD的时可能会经常碰到WORD中无法输入中文的情况。因为,虽然我们安装了搜狗输入法,但是到我们在WORD中使用搜狗的输入法的切换中英文的按键的时候会发现根本没有效果,无法将输入法切换成中文的。下面我就介绍一下如何在WORD中把搜狗输入法切换到中文。

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1,取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限(包括这两个文件夹的所有子文件夹的权限),简单点说,就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法,不少老外说,这样一弄,倒是解决了问题。不过对我的系统,没用; 方法2,以不带网络的安全模式启动,运行命令行,输入“ne