1***@qq.com
1***@qq.com
  • 发布:2019-11-08 18:39
  • 更新:2025-03-21 10:22
  • 阅读:5097

【经验分享】uniapp的input安卓自动聚焦和双向绑定安卓5.1局部组件失效

分类:uni-app

自动聚焦爬坑
需求:在扫码pda扫码然后每次扫完需要自动input
爬坑:一开始,我设置focus,在浏览器调试可以,但打包成安卓运行在5.1就会失效。经验就是:

    <input class="uni-input"  @confirm="onKeyInput"  
             :focus='setFocus' placeholder="请扫描条码" v-model="inputValue" disable=true @blur='resetFocus' @focus="addStyle" />  

export default {  
        components: {  
            mpvuePicker  
        },  
        data() {  
            return {  
                setFocus: false,  
            };  
        },  
        methods: {  
            resetFocus() {  
                this.setFocus = false;  
            }  
               }}

在失去焦点的时候 一定要把focus设置为 false,然后在别的事件触发完,再设置为true

            postProductInfo: function(product = {}) {  
                let _data = product;  
                uni.request({  
                    url: url,  
                    method: 'POST',  
                    data: _data,  
                    success: (res) => {  
                        uni.showToast({  
                            title: res.data.msg,  
                            duration: 1000  
                        });  
                        this.stockTimeNum()  
                        setTimeout(() => {  
                            this.setFocus = true  
                        }, 400)  
                    }  
                })  
            },

比如这里,坑就是之前我之前已经在某个地方写了this.setFocus = true,页面确实聚焦了,但是在有toast,下面的列表举荐渲染的时候,页面的input会闪一下,导致重新失去焦点,这时候需要自己找下在哪是最后一次渲染完 然后重新聚焦。

安卓5.1双向绑定失效

我在安卓8.0没问题 但是在pda扫码机器上 在动态刷新已扫码数量的时候,会不更新。控制台打印信息为:请求成功,但是无数据。不敢复现bug截图了。

解决办法:

        data() {  
            return {  
                pickerText: '',  
                scope: ''  
            };  
        },  
               methods: {  
            onConfirm(e) {  
                this.pickerText = e  
                this.scope = this.pickerText.value[0]   
                this.$nextTick(function() {  
                    this.stockTimeNum() // 这里的请求方法我直接直接使用this.pickerText.value[0] 请求传餐,会在5.1失效。。。爬坑时间半天。  
                    this.setFocus = true  
                })  
            }  
}

ps:爬了一天T.T。感谢uniapp团队。

2 关注 分享
3***@qq.com HRK_01

要回复文章请先登录注册

Miaowj

Miaowj

感谢楼主,打包成安卓app 正常运行
2025-03-21 10:22
1***@163.com

1***@163.com

扫码后显示弹窗,弹窗里的input也获取不到焦点,键盘可以弹出来。版本3.8.7,安卓环境。
2024-12-10 17:36
4***@qq.com

4***@qq.com

回复 1***@qq.com :
是不是还没修复
2024-05-30 14:56
w***@163.com

w***@163.com

你们都是app打包上线后input无法聚焦吗
2023-12-28 15:59
1***@qq.com

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

回复 Lspring :
2023年了 还没修复 6
2023-11-01 18:28
Lspring

Lspring

大神啊。input聚焦打包到安卓后失效问题困扰好几天了,renderJs、selectorQuery等各种方法都试了,就你这个是行的,简直是黎明的曙光
2023-04-14 12:42
d***@163.com

d***@163.com

感谢解惑
2023-01-03 13:41
你咋骚的一匹

你咋骚的一匹

我也是遇到了一样的问题,看了你的回答一下想通了感谢_(:3」∠)_
2020-01-02 18:00
UchihaSasuke

UchihaSasuke

感谢uniapp团队,爬了一天T.T。
2019-11-11 16:12