uni-app解决input、textarea在键盘弹起时被顶起,并在键盘上方

1,模板部分

复制代码
<view class="bottom-input" :style="{bottom:`${KeyboardHeight}rpx`}">
            <view class="input-squire">
                <u--textarea
                    placeholder="请输入内容~"
                    border="none"
                    class="inputs"
                    v-model="value"
                    autoHeight
                    maxlength="-1"
                    fixed
                    :adjustPosition="false"
                  ></u--textarea>
            </view>
            <u-button class="custom-style" type="primary" text="发送" @click="sendMsg"></u-button>
        </view>
复制代码

2,js部分

复制代码
data() {
        return {
            value:'',
            KeyboardHeight:''
        };
},
onLoad() {
     uni.onKeyboardHeightChange(res => {
        this.KeyboardHeight = this.rpxTopx(res.height-60)
            if(this.KeyboardHeight<0)this.KeyboardHeight = 0;
     })
},
 onUnload(){
     uni.offKeyboardHeightChange()
},
methods: {
        // px转换成rpx
        rpxTopx(px){
            let deviceWidth = wx.getSystemInfoSync().windowWidth
            let rpx = ( 750 / deviceWidth ) * Number(px)
            return Math.floor(rpx)
        },
}
复制代码

3,css部分

复制代码
.bottom-input{
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    border-top: 1px solid #F0F4F7;
    align-items: center;
    padding: 22rpx 16rpx 36rpx 20rpx;
    background-color: #fff;
    z-index: 99;
    .input-squire{
        width: 70%;
    }
    .inputs{
        background-color: #F0F4F7;
        padding-left: 20rpx;
        max-height: 120rpx;
        overflow-y: auto;
        placeholder{
            color: red;
        }
    }
    .custom-style{
        width: 18%;
        border-radius: 14rpx;
        height: 66rpx;
    }
}
复制代码

参考文章:https://blog.csdn.net/qq_51250105/article/details/130221088

posted @   G·H·C  阅读(1659)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示