1***@qq.com
1***@qq.com
  • 发布:2024-03-25 16:44
  • 更新:2025-01-06 14:15
  • 阅读:269

【报Bug】picker-view在滚动或者被点击后input框如果处于有焦点状态会自动弹出手机键盘

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22H2

HBuilderX类型: 正式

HBuilderX版本号: 3.99

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: Redmi 10A

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <u-popup :maskCloseAble="maskCloseAble" mode="bottom" v-model="show" height="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="10000">  
            <view class="af-select">  
                <view class="af-select__header" @touchmove.stop.prevent="">  
                    <view  
                        class="af-select__header__cancel af-select__header__btn"  
                        hover-class="af-hover-class"  
                        :hover-stay-time="150"  
                        @tap="getResult('cancel')"  
                    >  
                        取消  
                    </view>  
                    <view class="af-select__header__search">  
                        <u-search placeholder="请输入" @change="textChange" :show-action="false" v-model="keyword"></u-search>  
                    </view>  
                    <view  
                        class="af-select__header__confirm af-select__header__btn"  
                        hover-class="u-hover-class"  
                        :hover-stay-time="150"  
                        @touchmove.stop=""  
                        @tap.stop="getResult('confirm')"  
                    >  
                        确定  
                    </view>  
                </view>  
                <view class="af-select__body">  
                    <picker-view @change="columnChange" class="af-select__body__picker-view" :value="defaultSelector" v-if="show">  
                        <picker-view-column>  
                            <view class="af-select__body__picker-view__item" v-for="(item, index) in columnData" :key="index">  
                                <view class="u-line-1">{{ item.label }}</view>  
                            </view>  
                        </picker-view-column>  
                    </picker-view>  
                </view>  
            </view>  
        </u-popup>  
    </view>  
</template>  

<script>  
export default {  
    name:"af-select",  
    props: {  
        list: {  
            type: Array,  
            default: []  
        },  
        maskCloseAble: {  
            type: Boolean,  
            default: true  
        },  
        safeAreaInsetBottom: {  
            type: Boolean,  
            default: true  
        },  
        show: {  
            type: Boolean,  
            default: false  
        }  
    },  
    watch: {  
        list: {  
            handler(newVal) {  
                console.log(newVal);  
                this.list = newVal  
                this.columnData = newVal  
            }  
        }  
    },  
    data() {  
        return {  
            keyword: '',  
            columnData: [],  
            defaultSelector: [0]  
        }  
    },  
    methods: {  
        columnChange(e) {  

        },  
        getResult(res) {  

            console.log(this.columnData[this.defaultSelector[0]]);  
            // this.$emit('confirm', this.columnData[this.defaultSelector[0]])  
        },  
        close() {  

        },  
        textChange() {  
            this.columnData = this.list.filter(item => item.label.includes(this.keyword))  
        }  
    }  
}  
</script>  

<style lang="scss" scoped>  

    .container {  
        .af-select {  
            padding: 5px;  

            &__header {  
                display: flex;  
                justify-content: space-between;  
                align-items: center;  

                &__btn {  
                    margin: 0 5px;  
                }  

                &__search {  
                    flex: 1;  
                }  
            }  

            &__body {  
                width: 100%;  
                height: 500rpx;  
                overflow: hidden;  
                background-color: #fff;  

                &__picker-view {  
                    height: 100%;  
                    box-sizing: border-box;  

                    &__item {  
                        display: flex;  
                        align-items: center;  
                        justify-content: center;  
                        font-size: 32rpx;  
                        padding: 0 8rpx;  
                    }  
                }  
            }  
        }  
    }  

</style>  

操作步骤:

1、弹出popup,使input处于焦点状态。
2、收起手机键盘,滑动或点击picker-view
3、键盘重新弹出

预期结果:

滑动或点击后键盘不弹出

实际结果:

手机键盘重新弹出

bug描述:

picker-view在滚动或者被点击后input框如果处于有焦点状态会自动弹出手机键盘

2024-03-25 16:44 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以给个完整的demo看看

3***@qq.com

3***@qq.com

解决了吗?我也遇到这个问题了

要回复问题请先登录注册