3***@qq.com
3***@qq.com
  • 发布:2019-08-12 15:46
  • 更新:2020-06-01 15:13
  • 阅读:5321

关于uni-app 在弹出Popup时让input自动获取焦点的问题

分类:uni-app

在微信小程序的时候有时正常弹出,有时不弹出,有时弹出后input与软键盘中间有一大块空白区域,不知道哪里出了问题,各位大佬给看看,小弟谢过!
代码片段:

<template>  
    <view>  
        <view class="bottomWrapper">  
            <view>  
                <view class="buttonWrapper" @click="commentClick">  
                    <uniIcon type='chat' color="#333" size="24"></uniIcon>  
                    <view>评论</view>  
                </view>  
            </view>  
        </view>  
        <uni-popup ref="popup" type="bottom" :change='handelChange'>  
            <view class="publishWrapper">  
                <input type="text" confirm-type='done' v-model="myText" placeholder='说点什么吧' :focus='setFocus' cursor-spacing='15px' />  
                <view :style="{color:publishColor}">发布</view>  
            </view>  

        </uni-popup>  
    </view>  
</template>

数据:

    import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon"  
    import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup"  
    export default {  
        data() {  
            return {  
                myText:'',  
                setFocus:false  
            };  
        },  
        computed:{  
            publishColor(){  
                if(this.myText){  
                    return '#ff4049'  
                }else{  
                    return '#999'  
                }  
            }  
        },  
        components:{uniIcon, uniPopup},  
        methods:{  
            commentClick(){  
                this.$refs.popup.open()  
                this.setFocus=true  
            },  
            handelChange(){  

            }  
        }  
    }

css样式:

    .bottomWrapper{  
    position: fixed;  
    bottom: 0;  
    background-color: #fff;  
    width: 100%;  
    padding: 16rpx 10rpx;  
    border-top: 1px solid $uni-border-color;  
}  
.buttonWrapper{  
    text-align: center;  
    display: flex;  
    justify-content:center;  
    align-items:center;  
    font-size: $uni-font-size-base;  
    color: $uni-text-color;  
}  
.publishWrapper{  
    display: flex;  
    // padding: 6rpx;  
    justify-content: space-between;  
    input{  
        border: 1px solid $uni-border-color;  
        border-radius: 40rpx;  
        padding-left: 20rpx;  
        width: 70%;  
    }  
    view{  
        width: 20%;  
        text-align: center;  
    }  
}

部分截图:

2019-08-12 15:46 负责人:无 分享
已邀请:
小灵扬

小灵扬

<uni-popup ref="popup" type="center" @change="onPopupChange">  
    <input :focus="popup_visible" />  
</uni-popup>  
// 在这里改变focus,亲测有效!  
onPopupChange(e) {  
      this.$nextTick(() => {  
        this.popup_visible = e.show;  
      });  
    },
  • 1***@163.com

    牛皮,看了好多答案,你这个靠谱了

    2021-01-01 20:39

k***@gmail.com

k***@gmail.com

+1    

次谐波

次谐波

估计是 input 聚焦期间,css 动画的影响

//重置 focus setFocus  
this.setFocus= this.$refs.popup.showPopup  
//打开popup  
this.$refs.popup.open()  
//延迟更新focus setFocus  
setTimeout(()=>{  
    this.setFocus= true  
}, 50);
  • 秃顶佩奇

    按你的写法,为什么我还是不能自动获焦

    2020-04-14 16:48

该问题目前已经被锁定, 无法添加新回复