uniapp 滚动时不触发input失焦事件如何解决？

在 UniApp 中，滚动时 input 失焦事件不触发是常见问题，通常是由于滚动行为与输入框焦点管理冲突导致的。以下是几种解决方案：

1. 使用 @blur 事件并手动处理焦点

在 input 组件上绑定 @blur 事件，并结合 focus 状态控制：

<template>
  <view>
    <input 
      :focus="isFocused" 
      @blur="onBlur" 
      placeholder="输入内容"
    />
    <scroll-view scroll-y @scroll="onScroll">
      <!-- 其他内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocused: false
    };
  },
  methods: {
    onBlur() {
      // 失焦处理逻辑
      this.isFocused = false;
    },
    onScroll() {
      // 滚动时强制失焦
      this.isFocused = false;
    }
  }
};
</script>

2. 使用 scroll-view 替代页面滚动

将页面内容包裹在 scroll-view 中，通过其事件控制：

<scroll-view scroll-y @scroll="handleScroll">
  <input @blur="onInputBlur" />
  <!-- 其他内容 -->
</scroll-view>

3. 动态调整输入框位置

在聚焦时调整布局，避免滚动干扰：

methods: {
  onInputFocus() {
    // 聚焦时可能需调整页面布局
  },
  onInputBlur() {
    // 失焦后恢复布局
  }
}

4. 使用定时器延迟处理（临时方案）

onScroll() {
  setTimeout(() => {
    // 强制失焦逻辑
  }, 100);
}

推荐方案：

优先采用 方案1，结合 @blur 和手动焦点控制，兼容性较好。若问题持续，检查 UniApp 版本并考虑升级。

注意：不同平台（如 iOS/Android）可能存在差异，建议真机测试。