【报Bug】iOS 18.x nvue开发的页面键盘唤起后收起页面没有恢复

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 15.1.1

HBuilderX类型：正式

HBuilderX版本号： 4.29

手机系统： iOS

手机系统版本号： iOS 18

手机厂商：苹果

手机机型： 14pm

页面类型： vue

vue版本： vue2

打包方式：离线

项目创建方式： HBuilderX

示例代码：

<template>  
  <view class="container">  
    <!-- 触发按钮 -->  
    <button @click="showPopup" type="primary">显示输入弹窗</button>  

    <!-- 弹出层 -->  
    <uni-popup   
      ref="popup"   
      type="bottom"   
      :safe-area="true"   
      :mask-click="true"  
      @change="onPopupChange"  
    >  
      <view class="popup-content">  
        <text class="popup-title">请输入内容</text>  
        <input   
          class="input-box"  
          v-model="inputValue"  
          placeholder="请输入内容"  
          @confirm="handleConfirm"  
          :adjust-position="true"  
          @focus="onFocus"  
          @blur="onBlur"  
          :cursor-spacing="100"  
          :fixed="true"  
        />  
        <view class="btn-group">  
          <button class="btn cancel" @click="handleClose">取消</button>  
          <button class="btn confirm" @click="handleConfirm">确定</button>  
        </view>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
export default {  
  pageStyle: {  
    androidSoftInputMode: 'adjustResize'  
  },  
  data() {  
    return {  
      inputValue: '',  
      isKeyboardShow: false  
    }  
  },  
  methods: {  
    showPopup() {  
      // 显示弹窗  
      this.$refs.popup.open('bottom')  
    },  
    handleClose() {  
      // 关闭弹窗  
      this.$refs.popup.close()  
      this.inputValue = ''  
    },  
    handleConfirm() {  
      // 处理确认事件  
      if (!this.inputValue.trim()) {  
        uni.showToast({  
          title: '请输入内容',  
          icon: 'none'  
        })  
        return  
      }  
      // TODO: 处理输入内容  
      console.log('输入内容：', this.inputValue)  
      this.handleClose()  
    },  
    onFocus() {  
      this.isKeyboardShow = true  
    },  
    onBlur() {  
      this.isKeyboardShow = false  
    },  
    onPopupChange(e) {  
      if (!e.show) {  
        // 弹窗关闭时清空输入  
        this.inputValue = ''  
        // 如果键盘还在显示，让输入框失去焦点  
        if (this.isKeyboardShow) {  
          uni.hideKeyboard()  
        }  
      }  
    }  
  },  
  onLoad() {  
    // 设置页面背景色，避免透明问题  
    // uni.setBackgroundColor({  
    //   backgroundColor: '#ffffff'  
    // })  
  }  
}  
</script>  

<style>  
.container {  
  flex: 1;  
  position: relative;  
  align-items: center;  
  justify-content: center;  
}  
.popup-content {  
  background-color: #fff;  
  padding: 20px;  
  width: 750rpx;  
  border-radius: 16px 16px 0 0;  
  position: relative;  
  bottom: 0;  
  z-index: 999;  
}  
.popup-title {  
  font-size: 16px;  
  text-align: center;  
  margin-bottom: 20px;  
}  
.input-box {  
  border: 1px solid #eee;  
  height: 40px;  
  padding: 0 10px;  
  margin: 20px 0;  
  background-color: #fff;  
  position: relative;  
  border-radius: 4px;  
}  
.btn-group {  
  flex-direction: row;  
  justify-content: space-between;  
  margin-top: 20px;  
}  
.btn {  
  width: 240rpx;  
  height: 40px;  
  line-height: 40px;  
  text-align: center;  
  border-radius: 3px;  
}  
.cancel {  
  background-color: #f1f1f1;  
  color: #666;  
}  
.confirm {  
  background-color: #007AFF;  
  color: #fff;  
}  
</style>

操作步骤：

<template>  
  <view class="container">  
    <!-- 触发按钮 -->  
    <button @click="showPopup" type="primary">显示输入弹窗</button>  

    <!-- 弹出层 -->  
    <uni-popup   
      ref="popup"   
      type="bottom"   
      :safe-area="true"   
      :mask-click="true"  
      @change="onPopupChange"  
    >  
      <view class="popup-content">  
        <text class="popup-title">请输入内容</text>  
        <input   
          class="input-box"  
          v-model="inputValue"  
          placeholder="请输入内容"  
          @confirm="handleConfirm"  
          :adjust-position="true"  
          @focus="onFocus"  
          @blur="onBlur"  
          :cursor-spacing="100"  
          :fixed="true"  
        />  
        <view class="btn-group">  
          <button class="btn cancel" @click="handleClose">取消</button>  
          <button class="btn confirm" @click="handleConfirm">确定</button>  
        </view>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
export default {  
  pageStyle: {  
    androidSoftInputMode: 'adjustResize'  
  },  
  data() {  
    return {  
      inputValue: '',  
      isKeyboardShow: false  
    }  
  },  
  methods: {  
    showPopup() {  
      // 显示弹窗  
      this.$refs.popup.open('bottom')  
    },  
    handleClose() {  
      // 关闭弹窗  
      this.$refs.popup.close()  
      this.inputValue = ''  
    },  
    handleConfirm() {  
      // 处理确认事件  
      if (!this.inputValue.trim()) {  
        uni.showToast({  
          title: '请输入内容',  
          icon: 'none'  
        })  
        return  
      }  
      // TODO: 处理输入内容  
      console.log('输入内容：', this.inputValue)  
      this.handleClose()  
    },  
    onFocus() {  
      this.isKeyboardShow = true  
    },  
    onBlur() {  
      this.isKeyboardShow = false  
    },  
    onPopupChange(e) {  
      if (!e.show) {  
        // 弹窗关闭时清空输入  
        this.inputValue = ''  
        // 如果键盘还在显示，让输入框失去焦点  
        if (this.isKeyboardShow) {  
          uni.hideKeyboard()  
        }  
      }  
    }  
  },  
  onLoad() {  
    // 设置页面背景色，避免透明问题  
    // uni.setBackgroundColor({  
    //   backgroundColor: '#ffffff'  
    // })  
  }  
}  
</script>  

<style>  
.container {  
  flex: 1;  
  position: relative;  
  align-items: center;  
  justify-content: center;  
}  
.popup-content {  
  background-color: #fff;  
  padding: 20px;  
  width: 750rpx;  
  border-radius: 16px 16px 0 0;  
  position: relative;  
  bottom: 0;  
  z-index: 999;  
}  
.popup-title {  
  font-size: 16px;  
  text-align: center;  
  margin-bottom: 20px;  
}  
.input-box {  
  border: 1px solid #eee;  
  height: 40px;  
  padding: 0 10px;  
  margin: 20px 0;  
  background-color: #fff;  
  position: relative;  
  border-radius: 4px;  
}  
.btn-group {  
  flex-direction: row;  
  justify-content: space-between;  
  margin-top: 20px;  
}  
.btn {  
  width: 240rpx;  
  height: 40px;  
  line-height: 40px;  
  text-align: center;  
  border-radius: 3px;  
}  
.cancel {  
  background-color: #f1f1f1;  
  color: #666;  
}  
.confirm {  
  background-color: #007AFF;  
  color: #fff;  
}  
</style>

预期结果：

无

实际结果：

<template>  
  <view class="container">  
    <!-- 触发按钮 -->  
    <button @click="showPopup" type="primary">显示输入弹窗</button>  

    <!-- 弹出层 -->  
    <uni-popup   
      ref="popup"   
      type="bottom"   
      :safe-area="true"   
      :mask-click="true"  
      @change="onPopupChange"  
    >  
      <view class="popup-content">  
        <text class="popup-title">请输入内容</text>  
        <input   
          class="input-box"  
          v-model="inputValue"  
          placeholder="请输入内容"  
          @confirm="handleConfirm"  
          :adjust-position="true"  
          @focus="onFocus"  
          @blur="onBlur"  
          :cursor-spacing="100"  
          :fixed="true"  
        />  
        <view class="btn-group">  
          <button class="btn cancel" @click="handleClose">取消</button>  
          <button class="btn confirm" @click="handleConfirm">确定</button>  
        </view>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
export default {  
  pageStyle: {  
    androidSoftInputMode: 'adjustResize'  
  },  
  data() {  
    return {  
      inputValue: '',  
      isKeyboardShow: false  
    }  
  },  
  methods: {  
    showPopup() {  
      // 显示弹窗  
      this.$refs.popup.open('bottom')  
    },  
    handleClose() {  
      // 关闭弹窗  
      this.$refs.popup.close()  
      this.inputValue = ''  
    },  
    handleConfirm() {  
      // 处理确认事件  
      if (!this.inputValue.trim()) {  
        uni.showToast({  
          title: '请输入内容',  
          icon: 'none'  
        })  
        return  
      }  
      // TODO: 处理输入内容  
      console.log('输入内容：', this.inputValue)  
      this.handleClose()  
    },  
    onFocus() {  
      this.isKeyboardShow = true  
    },  
    onBlur() {  
      this.isKeyboardShow = false  
    },  
    onPopupChange(e) {  
      if (!e.show) {  
        // 弹窗关闭时清空输入  
        this.inputValue = ''  
        // 如果键盘还在显示，让输入框失去焦点  
        if (this.isKeyboardShow) {  
          uni.hideKeyboard()  
        }  
      }  
    }  
  },  
  onLoad() {  
    // 设置页面背景色，避免透明问题  
    // uni.setBackgroundColor({  
    //   backgroundColor: '#ffffff'  
    // })  
  }  
}  
</script>  

<style>  
.container {  
  flex: 1;  
  position: relative;  
  align-items: center;  
  justify-content: center;  
}  
.popup-content {  
  background-color: #fff;  
  padding: 20px;  
  width: 750rpx;  
  border-radius: 16px 16px 0 0;  
  position: relative;  
  bottom: 0;  
  z-index: 999;  
}  
.popup-title {  
  font-size: 16px;  
  text-align: center;  
  margin-bottom: 20px;  
}  
.input-box {  
  border: 1px solid #eee;  
  height: 40px;  
  padding: 0 10px;  
  margin: 20px 0;  
  background-color: #fff;  
  position: relative;  
  border-radius: 4px;  
}  
.btn-group {  
  flex-direction: row;  
  justify-content: space-between;  
  margin-top: 20px;  
}  
.btn {  
  width: 240rpx;  
  height: 40px;  
  line-height: 40px;  
  text-align: center;  
  border-radius: 3px;  
}  
.cancel {  
  background-color: #f1f1f1;  
  color: #666;  
}  
.confirm {  
  background-color: #007AFF;  
  color: #fff;  
}  
</style>

bug描述：

nvue开发的页面键盘收起页面没有恢复，使用开发工具调试运行正常，打包离线使用页面没有恢复

2024-11-28 19:01 负责人:无分享

1 个回复

DCloud_heavensoft

nvue、weex已经不再维护。推荐使用uni-app x 的uvue，体验更好，或者改用vue的webview。
当然如果一定要修改nvue的问题，有一种办法是点论坛右上角的付费技术支持

yangjw (作者)

已经使用其他办法解决了

2024-11-29 15:20

要回复问题请先登录或注册

【报Bug】iOS 18.x nvue开发的页面键盘唤起后收起页面没有恢复

预期结果：

无

bug描述：

1 个回复

公告

相关问题

【报Bug】iOS 18.x nvue开发的页面 键盘唤起后 收起页面没有恢复

预期结果： 无

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

【报Bug】iOS 18.x nvue开发的页面键盘唤起后收起页面没有恢复

预期结果：

无