uni-app编译器Bug，界面返回时input无法输入

uni-app编译器Bug，界面返回时input无法输入

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

<swiper-item> <view style="text-align: left;padding: 20rpx 30rpx;background-color: #FFFFFF;height: 100%;"> <view class="oneRow" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee;"> <text class="oneRow-a" style="margin-top: 20rpx;margin-bottom: 20rpx;">订单</text> <text class="oneRow-b">新订单</text> </view> <view class="oneRow" style="border-bottom: 1px solid #eee;display: flex;justify-content: space-between;" [@click](/user/click)="toStorage"> <view> <text class="oneRow-a" style="margin-top: 0;margin-bottom: 20rpx;">库位</text> <text class="oneRow-b">{{activeID}}</text> </view> <view style="margin-top: 10rpx;"> <text class="cuIcon-right" style="font-size: 15px;"></text> </view> </view> <view class="oneRow" > <text class="oneRow-a" >原有库存</text> <text class="oneRow-b">{{bookTakeNames.Quantity ? bookTakeNames.Quantity : ''}}</text> </view> <view class="oneRow"> <text class="oneRow-a">整包</text> <text class="oneRow-b">{{bookTakeNames.PackageCount}}</text> <text style="color: #999;margin-left: 10rpx;">({{bookTakeNames.PackageUnitCount ? bookTakeNames.PackageUnitCount : 0}}册/包)</text> </view> <view class="oneRow" style="border-bottom: 1px solid #eee;"> <text class="oneRow-a" style="margin-bottom: 20rpx;">散册</text> <text class="oneRow-b" style="color: #999;">{{bookTakeNames.ScatterCount}}</text> </view> <view class="oneRow" style="border-bottom: 1px solid #eee;display: flex;" > <text class="oneRow-a" style="margin-top: 20rpx;margin-bottom: 20rpx;margin-top: 0;">整包</text> <input type="number" value="" placeholder="请输入整包数" v-model="totalkNumber.PackageCount" placeholder-class="phClass" /> </view> <view class="oneRow" style="border-bottom: 1px solid #eee;display: flex;"> <text class="oneRow-a" style="margin-top: 20rpx;margin-bottom: 20rpx;margin-top: 0;">散册</text> <input type="number" value="" placeholder="请输入散册数" v-model="totalkNumber.ScatterCount" placeholder-class="phClass"/> </view> <view class="oneRow" style="border-bottom: 1px solid #eee;"> <text class="oneRow-a" style="margin-top: 20rpx;margin-bottom: 20rpx;margin-top: 0;">总计</text> <text class="oneRow-b">{{totalkNumber.amount}}</text> </view> <view style="display: flex;justify-content: center;margin-top: 16rpx;"> <button class="cu-btn" style="background-color: #fff;width: 100px;height: 35px;color: #007AFF;border: #007AFF 1px solid;" :disabled="moveKey" [@click](/user/click)="confirmMove">确认</button> </view> </view> </swiper-item> ```

操作步骤：

用swiper包住，然后跳转到另一个界面后再跳回来


### 预期结果：


input输入框无法输入

实际结果：

input输入框无法输入


### bug描述：


A界面跳转到B界面，后在退回到A界面，input输入框无法输入，

更多关于uni-app编译器Bug，界面返回时input无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

是发行到H5么?

更多关于uni-app编译器Bug，界面返回时input无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


app

我的是在form表单中使用picker组件，picker是选择省市区，当进入到这个页面，把picker组件点开之后，不管选择与不选择，关闭掉弹框，然后input就点击不了了，如果不点开picker组件，都是可以点击的

看来还得继续等待了

这个问题是 uni-app 中一个已知的常见问题，通常发生在页面切换后 input 组件失去焦点或无法响应输入事件。

主要原因分析：

  1. 页面生命周期与组件状态冲突：当页面通过 navigateTo 跳转后返回时，页面可能没有正确重新渲染或激活 input 组件。
  2. swiper 组件嵌套问题：swiper 内部的组件在页面返回时可能存在渲染状态异常。
  3. Vue 数据绑定延迟：v-model 绑定的数据在页面返回时可能没有及时同步到视图层。

解决方案：

方案一：强制重新渲染组件 在页面的 onShow 生命周期中，强制更新数据或重新渲染：

onShow() {
    // 强制更新数据
    this.$forceUpdate();
    // 或者重新赋值
    this.totalkNumber = {...this.totalkNumber};
}

方案二：使用 key 属性强制重建 input 给 input 添加唯一的 key，页面返回时改变 key 值强制重建：

<input 
    type="number" 
    placeholder="请输入整包数" 
    v-model="totalkNumber.PackageCount"
    :key="inputKey1"
/>

data() {
    return {
        inputKey1: Date.now()
    }
},
onShow() {
    this.inputKey1 = Date.now();
}

方案三：避免 swiper 嵌套 如果可能，将 input 移出 swiper 组件，或改用其他布局方式。

方案四：使用 focus 方法 在页面显示时手动触发 input 的 focus（需要用户交互）：

onShow() {
    setTimeout(() => {
        // 需要获取 input 实例
        this.$refs.myInput.focus();
    }, 100);
}

临时规避方案： 在 input 外层添加 @touchstart 事件，强制激活页面：

<view [@touchstart](/user/touchstart)="handleTouch">
    <input ... />
</view>
回到顶部