3***@qq.com
3***@qq.com
  • 发布:2022-09-18 10:00
  • 更新:2022-09-19 13:45
  • 阅读:102

【报Bug】使用uni.offKeyboardHeightChange(CALLBACK)无法取消监听软键盘高度的变化

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.6.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 耀荣50SE

页面类型: nvue

vue版本: vue3

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

index.nvue

<template>  
    <view class="content">  

        <button type="primary" class="btn" @click="jumpTest">test页面</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        };  
    },  
    onLoad() {},  
    methods: {  
        jumpTest() {  
            uni.navigateTo({  
                url: '../test/test'  
            });  
        }  
    }  
};  
</script>  

<style>  
.btn {  
    width: 690rpx;  
    margin: 15px;  
}  
</style>

text.nvue

<template>  
    <view>  
        <text>{{ count }}</text>  
        <button type="primary" class="btn" @click="showKey">显示软键盘</button>  
        <button type="warn" class="btn" @click="hideKey">隐藏软键盘</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            count: 1,  
            timer: null  
        };  
    },  
    onShow() {  
        uni.onKeyboardHeightChange(res => {  
            console.log(res);  
            if (res.height == 0) {  
                if (this.timer) {  
                    try {  
                        clearInterval(this.timer);  
                    } catch (err) {  
                        console.log(err);  
                    }  
                }  
            }  
        });  
    },  
    onHide() {  
        uni.offKeyboardHeightChange(() => {});  
        // if (this.timer) {  
        //  clearInterval(this.timer);  
        // }  
    },  
    methods: {  
        showKey() {  
            // #ifdef APP-NVUE  
            plus.key.showSoftKeybord();  
            // #endif  
            console.log(this.timer);  
            if (this.timer) {  
                clearInterval(this.timer);  
            }  
            this.timer = setInterval(() => {  
                this.count = Math.random() * 30;  
            }, 1500);  
        },  
        hideKey() {  
            // #ifdef APP-NVUE  
            plus.key.hideSoftKeybord();  
            // #endif  
            if (this.timer) {  
                clearInterval(this.timer);  
            }  
        }  
    }  
};  
</script>  

<style scoped>  
.btn {  
    width: 690rpx;  
    margin: 30rpx;  
}  
</style>  

操作步骤:

点击test页面按钮,进入test页面,点击显示软键盘按钮,点击左上角箭头返回到index页面,再次点击test页面按钮,进入test页面,点击显示软键盘按钮

预期结果:

可以取消监听软键盘高度的变化

实际结果:

无法取消监听软键盘高度变化的时间,uni.onKeyboardHeightChange()会监听到多次

bug描述:

使用uni.offKeyboardHeightChange(CALLBACK)无法取消监听软键盘高度的变化

2022-09-18 10:00 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

offKeyboardHeightChange需要传入你想取消的那个function,而不是一个新的function

3***@qq.com

3***@qq.com (作者)

vue2.0使用uni.offKeyboardHeightChange(CALLBACK)可以取消监听软键盘高度的变化
vue3.0就无法取消监听

  • DCloud_UNI_GSQ

    从实现代码看 vue2 版本当初兼容了微信小程序的一个bug:https://github.com/dcloudio/uni-app/blob/0edd43ecafaebd2b7a638ecccf3d527702eecf43/src/core/service/api/keyboard/keyboard.js

    当传入的参数错误时,会移除最后一次监听。不过后来微信的文档也已经更新了(写了避免用户引起误会的代码示例),vue3 不再保留此bug兼容。

    现在,同时更新uni-app文档,以让用户知道正确用法。

    2022-09-19 17:47

  • DCloud_UNI_GSQ

    回复 DCloud_UNI_GSQ: 之前示例写的uni.offKeyboardHeightChange(callback),开发者可能不能理解callback是之前监听的引用,现在更新了文档,可以让开发者可以更明白。

    2022-09-19 17:49

  • 3***@qq.com (作者)

    回复 DCloud_UNI_GSQ: 好的,感谢

    2022-09-19 18:17

要回复问题请先登录注册