uni-app picker-view组件BUG，与微信小程序picker-view表现不符

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/小程序/微信

示例代码：

```html
<template>  
    <picker-view :value="value" indicator-style="height: 50px;" @change="bindChange">  
        <picker-view-column>  
                <view class="item" v-for="(item) in list1" :key="item">{{item}}</view>  
        </picker-view-column>  
        <picker-view-column>  
                <view class="item" v-for="(item) in list2" :key="item">{{item}}</view>  
        </picker-view-column>  
    </picker-view>  
</template>  

<script>  
export default {  
data () {  
    return {  
        value: [0, 0],  
        list1: ['测试1', '测试2'],  
        list2: ['测试11', '测试22'],  
        indicatorStyle: `height: 50px;`  
    }  
},  
methods: {  
    bindChange (e) {  
        console.log('change::', e)  
        if (e.detail.value[0] === 0) {  
            this.list2 = ['测试11', '测试22']  
            this.value = [0, 0]  
        } else {  
            this.list2 = ['测试11', '测试22', '测试33', '测试44']  
            this.value = [1, 3]  
        }  
    }  
}  
</script>  

<style>  
picker-view {  
    width: 100%;  
    height: 600rpx;  
    margin-top:20rpx;  
}  
.item {  
    line-height: 100rpx;  
    text-align: center;  
}  
</style>

更多关于uni-app picker-view组件BUG，与微信小程序picker-view表现不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

有没有官方的人看下确认下

更多关于uni-app picker-view组件BUG，与微信小程序picker-view表现不符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼

4天了没消息

eggper 3楼

这个问题就没人在意吗，还是用HBuilderX开发小程序的人太少了？

gougou168 4楼

这是一个已知的uni-app中picker-view组件与微信原生小程序表现不一致的问题。主要差异点在于：

在微信小程序中，picker-view的value变更会立即生效并触发滚动动画
而在uni-app中，直接修改value不会触发滚动动画，表现较为生硬

解决方案建议：

使用setTimeout延迟设置value值：

bindChange (e) {
    console.log('change::', e)
    if (e.detail.value[0] === 0) {
        this.list2 = ['测试11', '测试22']
        setTimeout(() => {
            this.value = [0, 0]
        }, 50)
    } else {
        this.list2 = ['测试11', '测试22', '测试33', '测试44']
        setTimeout(() => {
            this.value = [1, 3]
        }, 50)
    }
}

或者使用$nextTick：

bindChange (e) {
    // ...其他代码
    this.$nextTick(() => {
        this.value = [1, 3]
    })
}