uni-app 真机调试时 uni-search-bar 的 @confirm 事件无法读取搜索框当前 text

uni-app 真机调试时 uni-search-bar 的 @confirm 事件无法读取搜索框当前 text

操作步骤：

<uni-search-bar ref="searchBar" style="flex:1;" radius="100" v-model="searchText" :focus="focus"  
    :placeholder="hotWord" clearButton="auto" cancelButton="always" @clear="cancel" [@confirm](/user/confirm)="confirm"  
    @cancel="cancel" />

confirm(res) {  
    // 键盘确认  
    this.search(res.value);  
}

预期结果：

res应该有值

实际结果：

res为空字符串

bug描述：

如题。另外，项目使用的是uni-starter为模板，页面是pages/list/search/search.nvue。在微信小程序开发者工具调试时，使用电脑键盘一切正常。当使用小米手机进行真机调试时，输入完按下键盘上的搜索，confirm事件绑定的方法触发但是无法读取搜索框内的内容，console log 显示为空字符串

开发环境 版本号 项目创建方式
Mac 13.3.1 HBuilderX
HBuilderX 3.99
第三方开发者工具 1.06.2401122darwin-arm64
基础库 3.3.1

更多关于uni-app 真机调试时 uni-search-bar 的 @confirm 事件无法读取搜索框当前 text的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

你直接写个 input 加上 @ confirm 事件 试试能不能拿到值

更多关于uni-app 真机调试时 uni-search-bar 的 @confirm 事件无法读取搜索框当前 text的实战教程也可以访问 https://www.itying.com/category-93-b0.html


Input可以在真机调试时拿到值，但是uni-search-bar组件的@confirm还是不行

回复 y***@163.com: 你打开源码uni-search-bar 把这个uni.hideKeyboard(); 和 plus.key.hideSoftKeybord()都删了 运行看看效果 我这边没有小米手机 只能你去试试了

uni-search-bar.vue

当使用真机调试1.0版本时可以正确获取到值，而使用2.0版本则失败

2.0版本？

@爱豆豆

上面我发的你试了吗？

回复 爱豆豆: 试过了，不生效。这两句是APP端的条件编译。我测的是小程序端。BTW，我刚又发了个问题，你可以看一下

在 uni-app 中，uni-search-bar 组件的 @confirm 事件确实可以用来监听用户按下键盘上的“搜索”按钮。然而，如果你发现无法读取搜索框的当前文本，可能是因为你没有正确地获取 uni-search-bar 的 value 属性。

以下是一个示例，展示如何在 @confirm 事件中获取搜索框的当前文本：

<template>
  <view>
    <uni-search-bar
      placeholder="请输入搜索内容"
      @confirm="onSearch"
      v-model="searchText"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    };
  },
  methods: {
    onSearch() {
      // 在这里可以访问 searchText，它包含了搜索框的当前文本
      console.log('搜索内容:', this.searchText);
      // 你可以在这里执行搜索逻辑
    }
  }
};
</script>

关键点：

  1. v-model 绑定：通过 v-model 将 uni-search-bar 的 value 绑定到 searchText 变量上。这样，searchText 会实时反映搜索框中的内容。
  2. @confirm 事件：在 onSearch 方法中，你可以直接访问 this.searchText 来获取搜索框的当前文本。

注意事项：

  • 确保 uni-search-bar 组件的版本是最新的，以避免潜在的 bug。
  • 如果你在真机调试时遇到问题，可以尝试在模拟器或浏览器中先进行调试，确保代码逻辑正确。

其他方法：

如果你不想使用 v-model，也可以通过 ref 来获取 uni-search-bar 的实例，并直接访问其 value 属性：

<template>
  <view>
    <uni-search-bar
      ref="searchBar"
      placeholder="请输入搜索内容"
      @confirm="onSearch"
    />
  </view>
</template>

<script>
export default {
  methods: {
    onSearch() {
      const searchText = this.$refs.searchBar.value;
      console.log('搜索内容:', searchText);
      // 你可以在这里执行搜索逻辑
    }
  }
};
</script>
回到顶部