uniapp固定搜索栏在头部

UniApp（原DCloud）是一款基于Vue.js的跨平台框架，它允许开发者编写一次代码，构建适用于多种设备的应用，包括Web、iOS、Android等。如果你想要在uni-app项目中创建一个固定的搜索栏位于页面头部，你可以按照以下步骤操作：

1. 首先，在`pages`文件夹下新建一个组件，例如`header.vue`，作为头部模板。

<template>
  <view class="search-bar">
    <input placeholder="输入搜索关键词" v-model="searchKey" @input="searchInput" />
    <button @click="clearSearch">清除</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
    };
  },
  methods: {
    searchInput(e) {
      // 这里可以添加搜索逻辑
    },
    clearSearch() {
      this.searchKey = '';
    },
  },
};
</script>

<style scoped>
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 根据需要设置颜色 */
}
</style>

2. 然后，在需要应用搜索栏的地方引用这个头部组件，并将其放置在布局顶部，比如在全局的 App.vue 或者你想固定头部的某个页面中。

<!-- 如果是在 App.vue 中 -->
<template>
  <view>
    <Header :search-key.sync="searchKey" /> <!-- 使用 prop 同步数据 -->
    <router-view></router-view> <!-- 页面内容 -->
  </view>
</template>

<template src="./components/header.vue"></template> <!-- 引入 header 组件 -->

<script>
import Header from '@/components/Header.vue';

export default {
  components: { Header },
  data() {
    return {
      searchKey: '', // 如果你在其他地方已有搜索 Key，这里同步即可
    };
  },
};
</script>

<!-- 如果是在某个特定页面中 -->
<template>
  <view>
    <Header :search-key="searchKey" /> <!-- 传递搜索 Key -->
    <!-- 页面主体内容 -->
  </view>
</template>

这样就实现了固定搜索栏的效果。记得调整样式以适应你的设计需求，并根据实际业务逻辑处理搜索输入和清除事件。