微信小程序使用uni-app实现首页搜索框导航栏功能详解

下面是“微信小程序使用uni-app实现首页搜索框导航栏功能详解”的完整攻略。

前言

本攻略介绍了如何在微信小程序中使用uni-app框架实现首页搜索框导航栏功能。其中，搜索框和导航栏都是uni-app提供的基础组件，通过二次开发和调整可以实现需要的效果。本攻略分为以下几个步骤：

创建uni-app项目
修改App.vue
创建searchBar.vue组件并实现搜索框功能
在index.vue中添加导航栏并调整页面样式
实现导航栏的点击事件
给导航栏添加下划线效果

一、创建uni-app项目

创建一个uni-app项目，命名为“weapp-demo”，选择“空模板”作为项目框架。创建完成后，我们可以得到以下目录结构：

weapp-demo
- pages
  - index
    - index.vue
- App.vue
- main.js

其中，pages文件夹下的文件用于存放各个页面的组件，App.vue是整个应用的入口，main.js则是Vue的初始化代码。

二、修改App.vue

我们需要在App.vue中设置导航栏的样式和标题，并将index.vue作为入口页面进行渲染。打开App.vue文件，修改代码如下：

<template>
  <div>
    <nav>
      <span class="nav-item">微信</span>
      <span class="nav-item active">通讯录</span>
      <span class="nav-item">发现</span>
    </nav>
    <router-view></router-view>
  </div>
</template>

<style scoped>
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 0 15px;
}

.nav-item {
  font-size: 16px;
  color: #333;
  padding: 10px;
}

.active {
  color: #07c160;
  border-bottom: 2px solid #07c160;
}
</style>

以上代码定义了一个包含导航栏和router-view的组件。我们设置了导航栏的样式和标题，通过router-view渲染入口页面。

三、创建searchBar.vue组件并实现搜索框功能

我们需要在首页添加一个搜索框，这个搜索框需要有清空、聚焦和失焦等功能。我们可以将搜索框封装在一个独立组件中，然后在index.vue中调用该组件来实现搜索框。接下来，我们创建一个名为“searchBar”的组件，创建方法如下：

在pages文件夹下新建一个searchBar.vue文件，代码如下：

<template>
  <div class="search-bar">
    <div class="search-input-wrap">
      <i class="iconfont icon-search"></i>
      <input type="text" v-model="keyword" placeholder="搜索"></input>
      <i class="iconfont icon-close" v-show="keyword" @click="clearKeyword"></i>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: ""
      };
    },
    methods: {
      clearKeyword() {
        this.keyword = "";
      }
    }
  };
</script>

<style scoped>
  .search-bar {
    background-color: #fff;
    border-bottom: 1px solid #d9d9d9;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }

  .search-input-wrap {
    height: 32px;
    border-radius: 16px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    padding: 0 10px;
    flex: 1;
  }

  input {
    display: block;
    height: 100%;
    border: none;
    background-color: transparent;
    flex: 1;
    margin-left: 10px;
    font-size: 14px;
  }

  i {
    font-size: 20px;
    color: #b3b3b3;
  }

  .icon-search::before {
    content: "\e607";
  }

  .icon-close::before {
    content: "\e60b";
  }
</style>

我们利用data()函数在$searchBar.vue$中的添加了一个组件级别的data，在组件中使用了input标签和两个iconfont图标。$methods$ 按钮clearKeyword清空搜索框的值。（代码中能看出来是vue2写法）

在上面代码中，我们定义一个名为“searchBar”的组件，在该组件中设置搜索框的样式，并实现搜索框的各种功能（清空、聚焦和失焦等）。我们在该组件中使用v-model绑定搜索框的值，使用v-show属性在搜索框有内容时显示清空按钮。

四、在index.vue中添加导航栏并调整页面样式

我们需要在index.vue中引入searchBar组件，并将其放在页面最上方。接下来，我们需要调整页面样式与布局。

<template>
  <div>
    <searchBar></searchBar>
    <div class="app-body"></div>
  </div>
</template>

<script>
import searchBar from "@/pages/searchBar.vue";
export default {
  name: "index",
  components: {
    searchBar
  }
};
</script>

<style scoped>
.app-body {
  height: 100vh;
  background-color: #f2f2f2;
}
</style>

以上代码是index.vue的完整代码。我们在该页面中使用了searchBar组件，并定义了一个名为“app-body”的容器，用来展示页面主体部分的内容。

五、实现导航栏的点击事件

接下来，我们需要为导航栏中的每一个按钮添加点击事件和变色效果。我们可以通过在App.vue中定义导航栏的样式和按钮，并使用$vue-router$来实现路由跳转，从而实现导航栏的功能。打开App.vue文件，添加如下代码：

<template>
  <div>
    <nav>
      <span class="nav-item" @click="toHome">微信</span>
      <span class="nav-item" :class="{ active: current === 'contacts' }" @click="toContacts">通讯录</span>
      <span class="nav-item" :class="{ active: current === 'discover' }" @click="toDiscover">发现</span>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: "contacts"
    };
  },
  methods: {
    toHome() {
      this.current = "chat";
      this.$router.push("/");
    },
    toContacts() {
      this.current = "contacts";
      this.$router.push("/contacts");
    },
    toDiscover() {
      this.current = "discover";
      this.$router.push("/discover");
    }
  }
};
</script>

以上代码中，我们为导航栏中的每一个按钮添加了点击事件，并使用:class属性来指定当前选择的按钮样式和判断当前路由路径来保持按钮激活状态。

六、给导航栏添加下划线效果

最后，我们需要给导航栏添加一个下划线效果，让用户直观地感受到当前页面所处的位置。我们可以通过为active类添加下划线样式来实现该效果。在App.vue的样式部分中添加以下代码：

.active {
  color: #07c160;
  border-bottom: 2px solid #07c160;
}

以上代码中，我们为active类添加了下划线样式。

示例说明

以下是两个示例说明：

示例一

我们需要实现一个类似微信聊天的场景，即用户进入应用后直接进入到第一个页面，该页面包含一个搜索框和一个联系人列表。我们点击导航栏中的“发现”按钮后，跳转到第二个页面，该页面显示一个列表，并且该页面对应导航栏的按钮保持激活状态。

我们可以根据以上需求，在pages文件夹下创建chat.vue、discover.vue和contacts.vue三个组件来实现。其中，chat.vue组件中包含一个搜索框和一个联系人列表，discover.vue组件中包含一个列表，而contacts.vue组件中不需要包含任何内容。

示例二

我们需要实现一个商品列表页面，该页面中包含一个搜索框和一个列表，以及导航栏中的“首页”、“推荐”和“我的”三个按钮。我们需要在点击导航栏的三个按钮时，分别实现路由跳转和按钮样式切换的效果。

我们可以根据以上需求，在pages文件夹下创建home.vue、recommend.vue和me.vue三个组件来实现。将home.vue组件定义为首页，使用v-for循环动态生成商品列表，同时在其中包含一个搜索框组件。而recommend.vue和me.vue组件则不需要包含列表。我们可以在App.vue中定义导航栏和样式并进行路由跳转和按钮样式切换的操作，从而实现该功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：微信小程序使用uni-app实现首页搜索框导航栏功能详解 - Python技术站