今天遇見一個問題，在使用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>
