uni-app 官网搜索无法正确跳转问题

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

uni-app 官网搜索无法正确跳转问题

操作步骤：

预期结果：

  • 正确显示搜索内容

实际结果：

  • 未正确显示搜索内容
  • （吐槽：你们要做 en 就做好一点 搜索大部分都不兼容，很多跳过去又重定向到了 en。不行你们就老老实实搞 zh 吧… 体验极差）

Harmonyos Next教程
1 回复

针对您提到的uni-app官网搜索无法正确跳转的问题，这通常可能涉及到搜索功能的实现逻辑、页面路由配置以及数据绑定等多个方面。以下是一个简化的代码示例，展示了一个基本的搜索功能实现，并假设搜索结果能够正确跳转到对应页面。请注意，由于我无法直接访问您的项目代码和配置，以下示例仅供参考，并可能需要根据您的实际情况进行调整。

1. 搜索页面（search.vue）

<template>
  <view>
    <input type="text" v-model="searchQuery" placeholder="搜索..." @input="onSearchInput" />
    <button @click="onSearch">搜索</button>
    <view v-if="results.length">
      <view v-for="(result, index) in results" :key="index" @click="navigateToResult(result)">
        {{ result.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      results: []
    };
  },
  methods: {
    onSearchInput() {
      // 这里可以添加实时搜索的逻辑，比如通过API查询
    },
    onSearch() {
      // 模拟搜索，实际应用中应替换为API调用
      this.results = this.mockSearch(this.searchQuery);
    },
    mockSearch(query) {
      // 模拟搜索结果
      return [
        { name: '结果1', id: 1 },
        { name: '结果2', id: 2 },
        // ...更多结果
      ].filter(result => result.name.includes(query));
    },
    navigateToResult(result) {
      // 跳转到搜索结果页面，传递必要参数
      uni.navigateTo({
        url: `/pages/result/result?id=${result.id}`
      });
    }
  }
};
</script>

2. 结果页面（result.vue）

<template>
  <view>
    <text>搜索结果页面</text>
    <text>ID: {{ resultId }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      resultId: null
    };
  },
  onLoad(options) {
    // 从路由参数中获取搜索结果ID
    this.resultId = options.id;
    // 这里可以添加根据ID获取详细信息的逻辑
  }
};
</script>

以上代码展示了如何在uni-app中实现一个简单的搜索功能，并在搜索结果点击时跳转到详情页面。请确保您的页面路由配置正确，并且API调用（如果有）能够返回正确的搜索结果。如果问题依然存在，建议检查API响应数据、页面路由配置以及控制台中的错误信息，以便进一步定位问题。

回到顶部