uni-app中picker-view(常见的坑)出现选择值与输出的值不一致
今天遇见一个问题,在使用picker-view的时候;
出现我选择的值和输出的值不一致;
经过与官方的demo做对比发现;
官方是实时的将值从组件中向上抛出去;
值是从change事件传递出去的
而我为了减少实时的想父组件传递值;
我将这个值存起来了的;
在用户点击确认的时候;
我才向上将值抛出去;
结果发现了一个问题
这个问题就是在我快速选择的时候;
我选择的值和输出的值不一致
因为当我快速选择的时候,造成异步;
如何解决:
使用change事件实时的将值抛出去
组件
下面的代码我使用了uni-popup这个弹框组件,这个组件是非常强大的哈;
有时间可以研究一下这个组件
<template>
<view>
<uni-popup ref="onlyhover" type="bottom" :maskClick=true>
<view class="date-select">
<view class="demo-flex">
<view class="select-time">
选择时长
</view>
<view class="of-sourceof" @click="closemask">
确认
</view>
</view>
<picker-view class="picker-view"
:value="defaultValue"
@pickstart="pickstart"
@change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in hoverhover" :key="index">{{item}}小时</view>
</picker-view-column>
</picker-view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
selectscooldata:{},
title: 'picker-view',
hoverhover:[0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8],
defaultValue:[2],//默认选中hoverhover中下标为2的那个元素
//defaultValue是默认展示的值,你要注意,如果hoverhover是动态循环出来时,你在data中直接给默认值,可能不能够显示你想要展示的值
}
},
methods: {
pickstart(){
console.log(1)
},
/**
* uniapp中,向上传递值得时候,不要在关闭事件中进行传递值;
* 因为关闭事件中有可能形成异步(造成选择的值和页面显示的值不一致这个问题)
* 使用change事件将值抛出去
* */
bindChange(e) {
console.log('gundong',e)
this.selectscooldata=e;
if(e.detail&&e.detail.value ){
//实时将用户选择的值抛出去
this.$emit('changeCont',this.hoverhover[e.detail.value[0]] )
}else{
// 用户没有滚动,说明用户选择的是我们给用户展示的默认值
}
},
date(e) {
this.$refs.onlyhover.open();
},
fatheropen(){
this.$refs.onlyhover.open();
},
fathClose(){
this.$refs.onlyhover.close();
},
/**
* 确认按钮,没有值得时候去寻找默认值
* */
closemask(){
if(this.selectscooldata.detail&&this.selectscooldata.detail.value ){
//
}else{
//此时用户选择的是默认值,在点击的时候抛出去
let cont=this.hoverhover[this.defaultValue[0]];
this.$emit('changeCont',cont )
}
}
}
}
</script>
<style scoped lang="scss">
.date-select {
width: 100%;
height: 500rpx;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
background-color: #FFFFFF;
position: relative;
.picker-view {
background-color: #EEEEEE;
position: absolute;
width: 100%;
height: 388rpx;
bottom: 20rpx;
.item {
height: 88rpx;
line-height: 68rpx;
font-size: 32rpx;
text-align: center;
}
}
.btn{
width: 100%;
height: 100rpx;
box-sizing: border-box;
.btn-left,.btn-right{
color: #FFFFFF;
width: 150upx;
height: 90upx;
line-height: 90upx;
text-align: center;
border-radius: 15upx;
}
}
}
.demo-flex{
display: flex;
align-items: center;
.select-time{
height:96rpx;
line-height: 96rpx;
font-size: 32rpx;
font-family: "PingFangSC, PingFangSC-Medium";
font-weight: 500;
text-align: center;
color: #323233;
flex: 1;
padding-left: 90rpx;
}
.of-sourceof{
height:96rpx;
line-height: 96rpx;
font-size: 30rpx;
font-family: "PingFangSC, PingFangSC-Regular";
text-align: center;
color: #3388ff;
padding-right: 32rpx;
}
}
</style>
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
分类:
uni-app
, uni-app(组件)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体