uni-app nvue Textarea输入内容页面乱跳

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app nvue Textarea输入内容页面乱跳

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 m2
HBuilderX类型 Alpha
HBuilderX版本号 4.26
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 14pm
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 正常操作

预期结果：

  • 不乱跳

实际结果：

  • 页面乱跳

bug描述：

nvue页面使用textarea组件输入内容在换行时页面会乱跳，就像开启了adjust-position这个参数顶起一样，但是我这个参数是关闭状态的。这个乱跳好像跟auto-height自动增高有关系，自动增高设置为false，频率就会减少很多。使用官方提供的textarea和uview的textarea都是这个问题，效果看附件。

204_1727229683.mp4_.zip


Harmonyos Next教程
3 回复

有时候页面跳动非常大，视频上还算是小的


怎么解决啊

在uni-app中使用nvue进行开发时，如果遇到Textarea组件输入内容页面乱跳的问题，这通常与nvue页面的渲染机制或者Textarea组件的某些属性设置不当有关。以下是一些可能的原因及其对应的代码案例，帮助你排查和解决问题。

1. 滚动条干扰

Textarea在内容超出可视区域时会出现滚动条，如果滚动条的行为与页面其他元素的布局产生冲突，可能会导致页面乱跳。可以尝试设置Textarea的滚动行为。

<template>
  <nvue-page>
    <div style="height: 100vh;">
      <textarea
        id="myTextarea"
        style="width: 100%; height: 300px;"
        :value="inputValue"
        @input="onInput"
        scroll="true"  <!-- 确保滚动行为被正确处理 -->
      />
    </div>
  </nvue-page>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    }
  }
};
</script>

2. 键盘弹出影响布局

在移动设备上，键盘的弹出和收回会改变页面的可用高度，这可能导致页面元素重新布局。可以尝试监听键盘事件并调整页面布局。

<template>
  <nvue-page>
    <div style="height: 100vh;">
      <textarea
        id="myTextarea"
        style="width: 100%; height: 300px;"
        :value="inputValue"
        @input="onInput"
      />
    </div>
  </nvue-page>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      keyboardHeight: 0
    };
  },
  methods: {
    onInput(event) {
      this.inputValue = event.detail.value;
    },
    onKeyboardShow(e) {
      this.keyboardHeight = e.detail.height;
      // 根据keyboardHeight调整页面布局
    },
    onKeyboardHide() {
      this.keyboardHeight = 0;
      // 恢复页面布局
    }
  },
  onReady() {
    plus.key.addEventListener('keyboardshow', this.onKeyboardShow);
    plus.key.addEventListener('keyboardhide', this.onKeyboardHide);
  },
  onDestroy() {
    plus.key.removeEventListener('keyboardshow', this.onKeyboardShow);
    plus.key.removeEventListener('keyboardhide', this.onKeyboardHide);
  }
};
</script>

总结

以上代码案例展示了如何通过设置Textarea的滚动行为和监听键盘事件来调整页面布局，以解决nvue中Textarea输入内容页面乱跳的问题。如果问题依然存在，建议检查Textarea周围其他元素的布局和样式设置，确保它们不会与Textarea的渲染行为产生冲突。

回到顶部