【uni-app】picker-view选择器快速滚动并确认时取值错误

当在picker滚动期间尝试关闭它时,数据可能无法即时更新。通过在picker-view上添加@pickstart和@pickend事件监听,可以在滚动开始时禁用确认按钮,待滚动结束再启用,确保数据正确同步。这种方法适用于所有平台,需要基础库版本2.3.1及以上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 在picker内容还在滚动时或滚动回弹动画还未结束时,点确定关闭弹出的picker,数据无法及时更新。需等待一下,或手动触停滚动再点确定。所有平台均如此

我们只需要在picker-view标签上加上两源生方法@pickstart @pickend

注意:小程序最低基础库要求2.3.1

pickstart 时,将是否可点击确认按钮设置为false,直到触发了pickend时,改变状态为 true,则可以点击确认,触发完成事件

<template>
			<picker-view  pickstart="pickstart" @pickend="pickend">
				......
			</picker-view>
</template>
<script>
	export default {
		data() {
			return {
				isMoving: false//是否处于移动状态
			}
		},
		methods: {
			pickstart() {
				this.isMoving = true;
			},
			pickend() {
				this.isMoving = false;
			},
			confirm(e) {
				if (this.isMoving) {
					console.log('不能点!!')
					return;
				}
				// 这里处理完成事件
			}
		}
	}
</script>

### u-picker 原生实现与使用方法 `u-picker` 是 `uView UI` 中的一个组件,主要用于日期、间或其他选项的选择功能。以下是关于其原生实现方式以及如何使用的详细介绍。 #### 1. 安装依赖 如果尚未安装 `uView UI` 库,则可以通过如下命令完成安装: ```bash npm install uview-ui --save ``` 或者使用 Yarn 进行安装: ```bash yarn add uview-ui ``` 此部分基于 Vue 和 Uni-app 的开发环境配置[^1]。 --- #### 2. 引入注册组件 在项目中引入 `u-view` 全局注册该库后即可直接调用 `u-picker` 组件。具体步骤如下: - **全局引入** 在项目的入口文件(通常是 main.js 或 app.vue)中引入 `uView`: ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` - **局部引入** 如果仅需单独使用某个组件,可以按需导入: ```javascript import { Upicker } from 'uview-ui/components/u-picker/u-picker'; export default { components: { Upicker } }; ``` 上述两种方式均可满足实际需求,视项目规模而定[^3]。 --- #### 3. 使用场景及参数说明 以下是一个典型的 `u-picker` 实现案例,展示如何设置日期范围和回调函数来获取用户选择的结果。 ##### (1) HTML 结构 ```html <template> <view> <!-- 打开选择器按钮 --> <button @click="showPicker = true">打开日期选择</button> <!-- u-picker 组件 --> <u-picker :show="showPicker" mode="time" fields="minute" startYear="2000" endYear="2099" @confirm="onConfirm" @cancel="onCancel"> </u-picker> </view> </template> ``` ##### (2) JavaScript 部分 ```javascript <script> export default { data() { return { showPicker: false, // 控制弹窗显示与否 selectedTime: '' // 存储最终选定的间 }; }, methods: { onConfirm(e) { this.selectedTime = e.year + '-' + e.month + '-' + e.day; console.log('确认选择:', this.selectedTime); // 输出到控制台 this.showPicker = false; // 关闭窗口 }, onCancel() { console.log('取消选择'); this.showPicker = false; // 关闭窗口 } } }; </script> ``` 此处展示了基本的功能逻辑,包括触发事件、传递数据给父组件等操作。 --- #### 4. 参数详解 | 属性名 | 类型 | 默认值 | 描述 | |--------------|----------|----------------|----------------------------------------------------------------------| | `mode` | String | `'selector'` | 设置模式:可选值为 date(日期)/ time(间)/ region(地区) | | `fields` | String | `'day'` | 间字段精度,默认精确至日;其他可能取值有 year/month/minute | | `startYear` | Number | 当前年份 - 10 | 起始年份 | | `endYear` | Number | 当前年份 + 10 | 截止年份 | 更多高级属性可通过官方文档进一步查阅。 --- #### 5. 注意事项 为了提升用户体验,在实际应用过程中需要注意以下几个方面: - 确保初始状态下变量已被正确定义; - 对于涉及大量计算的操作建议采用 computed 属性优化性能; - 合理利用 v-if/v-show 来管理 DOM 渲染流程以减少不必要的重绘成本。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值