uniapp中picker选择器滚动时确认关闭导致数据无法及时更新解决方案picker-view

最新推荐文章于 2024-07-25 11:43:11 发布

搬砖的前端

最新推荐文章于 2024-07-25 11:43:11 发布

阅读量2.8k

点赞数 1

分类专栏： uniapp技术栈及多端开发文章标签：前端 javascript vue.js

互帮互助，点赞收藏。一起成长，欢迎互动。

本文链接：https://blog.csdn.net/weixin_44461275/article/details/122474833

版权

uniapp技术栈及多端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

uniapp在picker内容还在滚动时或滚动回弹动画还未结束时，点确定关闭弹出的picker，数据无法及时更新。

官方回复是：需等待一下，或手动触停滚动再点确定。所有平台均如此

在这里插入图片描述

解决方案：picker-view

修改 picker 成：picker-view （样式要自己写）

<template>
	<view class="uni-list-cell-db">
		<button @click="changeBox" type="default">点击选择: {{arr[val[0]]}}</button>
		
		// 如果滚动中关闭，要获取 关闭前最后用一次值，则将代码里 v-show="visible" 改成：v-if="visible"
		// 当前模式 是关闭后，仍要获取最终滚动值
		<view v-show="visible">
			<picker-view :value="val" @pickend="pickend" @pickstart="pickstart" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in arr" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<button @click="changeBox" type="default">确定</button>
		</view>
	</view>
</template>

<script>
	let arr = [];
	for (var i = 0; i < 100; i++) {
		arr.push(i)
	}
	
	export default {
		data() {
			return {
				arr,
				val: [],
				visible: false,
			}
		},
		methods: {
			changeBox() {
				this.visible = !this.visible
			},
			bindChange: function(e) {
				console.log('索引：' + e.target.value)
				this.val = e.target.value;
				// ...
			}
		}
	}
</script>

<style>
	button {
		margin: 0 30rpx;
	}

	.picker-view {
		width: 100vw;
		height: 600rpx;
		margin-top: 200rpx;
	}

	.item {
		text-align: center;
	}
</style>