如何解决微信小程序input输入框弹出键盘时页面整体上移问题？

Question

微信小程序 input 输入框的键盘把页面整体顶上去（导航栏顶到屏幕上方看不到了）

使用过 scroll-view、设置过导航栏fixed固定定位等等

<template>
  <view class="scan-container">
    <u-navbar title="我是UI组件库导航栏" title-color="#000" title-bold></u-navbar>

    <view> 很多行 </view>
    <view>... </view>
    <input
          type="number"
          inputmode="number"
          v-model="customMoney"
          placeholder="输入自定义金额："
          @input="validateAmount"
          @focus="handleFocus"
          @blur="handleInputBlur"
          disable-scroll
          :adjust-position="true"
        />
 </view>
</template>

Answer 1

input 元素会有一个 adjust-position 属性，置为 false 就好了。

表单组件 / input | 微信官方文档-小程序

Answer 2

import { View, Image, InputProps, CommonEventFunction, Textarea } from "@tarojs/components";
import sendIcon from '@/assets/images/send.png'
import sendGreyIcon from '@/assets/images/send-grey.png'

import './style.scss';
import { useEffect, useState } from "react";
export function QuestionInput({
    disabled,
    onSend
}: {
    disabled: boolean,
    onSend?: (value: string) => void
}) {
    const [marginBottom, setMarginBottom] = useState(0);
    const [value, setValue] = useState('')
    const [focus, setFocus] = useState(false)
    const [autoHeight, setAutoHeight] = useState(false)
    const handleFocus = (event) => {
        if (event.detail.height) {
            setFocus(() => {
                setTimeout(() => setMarginBottom(event.detail.height + 120), 100)
                return true;
            })
        } else {
            setFocus(() => {
                setTimeout(() => setMarginBottom(0), 100)
                return false;
            })
        }
    }
    const handleInput: CommonEventFunction<InputProps.inputEventDetail> = (event) => {
        setValue(() => event.detail.value)
    }

    const handleClickSendBtn = () => {
        value && onSend && onSend(value)
        setValue('')
    }

    useEffect(() => {
        setAutoHeight(true)
    }, [])

    return <>
        <View className="question-input">
            <Textarea
                placeholder="试试问一个新问题"
                onKeyboardHeightChange={handleFocus}
                onInput={handleInput}
                value={value}
                adjustPosition={false}
                showConfirmBar={false}
                focus={focus}
                autoHeight={autoHeight}
                disabled={disabled}
            />
            <Image
                src={value ? sendIcon : sendGreyIcon}
                onClick={handleClickSendBtn}
            />
        </View>
        <View style={{
            transition: 'all ease-in-out 0.1s',
            display: 'block',
            width: '100%',
            height: `${marginBottom}rpx`
        }}></View>
    </>
}

当小程序组价的参数不生效的时候试试这个吧

Answer 3

1.首先，让我们看看你的代码结构。我注意到你使用了 u-navbar 组件，并且设置了 adjust-position="true"。这个属性实际上会触发页面的自动调整，我们需要修改这个设置。
2.主要的解决方案是：
设置 adjust-position="false" 来禁用自动调整
使用 fixed 定位来固定导航栏
使用 scroll-view 来确保内容可滚动

Answer 4

可以看看这个，我之前遇到这个问题时写下的https://segmentfault.com/a/1190000043904921

Answer 5

可以参考这一个

小程序底部input输入框，键盘弹起时页面整体上移问题解决

Answer 6

们看看你的代码结构。我注意到