uni-app <swiper><swiper-item>组件内使用input @confirm真机会执行两遍

uni-app <swiper><swiper-item>组件内使用input @confirm真机会执行两遍

示例代码：

<swiper :indicator-dots="true">  
    <swiper-item>  
        <input  
            confirm-type="send"  
            [@confirm](/user/confirm)="sendChatTwo()"  
        />  
    </swiper-item>  
    <swiper-item>  
        <view class="swiper-item"></view>  
    </swiper-item>  
</swiper>

操作步骤：

  • 使用真机测试点击键盘的发送按钮

预期结果：

实际结果：


| 项目属性         | 值           |
|------------------|--------------|
| 产品分类         | uniapp/小程序/微信 |
| PC开发环境操作系统 | Mac          |
| PC开发环境操作系统版本号 | 12.3.1       |
| HBuilderX类型   | 正式         |
| HBuilderX版本号 | 3.99         |
| 第三方开发者工具版本号 | RC 1.06.2312061 |
| 基础库版本号     | 3.3.4        |
| 项目创建方式     | HBuilderX    |

更多关于uni-app <swiper><swiper-item>组件内使用input @confirm真机会执行两遍的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以做个节流 data() {
return {
flag:false
}
},
methods: {
sendChatTwo(){
if(this.flag){
return
}
this.flag = true
setTimeout(()=>{
this.flag = false
},600)
console.log(‘1222222’)
}
}

更多关于uni-app <swiper><swiper-item>组件内使用input @confirm真机会执行两遍的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 <swiper> 和 <swiper-item> 组件时，如果在 <swiper-item> 内使用 <input> 组件并绑定 @confirm 事件，可能会遇到 @confirm 事件在真机上执行两遍的问题。这个问题通常是由于 swiper 组件的滑动行为与 input 组件的焦点管理之间的冲突导致的。

解决方案

  1. 使用 v-if 控制 input 的渲染
    可以通过 v-if 来控制 input 组件的渲染，确保只有在当前 swiper-item 处于激活状态时才渲染 input 组件。这样可以避免 input 组件在滑动过程中多次触发事件。

    <template>
  <swiper>
    <swiper-item v-for="(item, index) in list" :key="index">
      <div v-if="currentIndex === index">
        <input type="text" @confirm="handleConfirm" />
      </div>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3],
      currentIndex: 0
    };
  },
  methods: {
    handleConfirm() {
      console.log('Confirm event triggered');
    }
  },
  onSwiperChange(e) {
    this.currentIndex = e.detail.current;
  }
};
</script>

  2. 使用 :focus 控制输入框的焦点
    可以在 swiper 的 change 事件中手动控制 input 组件的焦点，确保只有在当前 swiper-item 处于激活状态时，input 组件才会获得焦点。

    <template>
  <swiper @change="onSwiperChange">
    <swiper-item v-for="(item, index) in list" :key="index">
      <input type="text" ref="input" @confirm="handleConfirm" />
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  methods: {
    handleConfirm() {
      console.log('Confirm event triggered');
    },
    onSwiperChange(e) {
      this.$refs.input.forEach((input, index) => {
        if (index === e.detail.current) {
          input.focus();
        } else {
          input.blur();
        }
      });
    }
  }
};
</script>

  3. 使用 debounce 函数防抖
    如果上述方法无法解决问题，可以考虑使用 debounce 函数对 @confirm 事件进行防抖处理，避免事件被多次触发。

    <template>
  <swiper>
    <swiper-item v-for="(item, index) in list" :key="index">
      <input type="text" @confirm="debouncedHandleConfirm" />
    </swiper-item>
  </swiper>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  created() {
    this.debouncedHandleConfirm = debounce(this.handleConfirm, 300);
  },
  methods: {
    handleConfirm() {
      console.log('Confirm event triggered');
    }
  }
};
</script>
回到顶部