uniapp s搜索功能实现

首先搜索功能实现

一、布局

搜索栏普遍出现在app首页 同时我们在点击搜索栏之后会跳转到搜索页面 草图例

相比而言我们发现这个搜索栏在上方样式和布局基本差不多 所以我们把这个搜索栏抽离出来封装成一个组件进行复用

<template>
  <view class="nav-bar">
    <view class="nav-bar-top">
      <view :style="{height:statusHeight + 'rpx'}"></view>

      <!--当界面为搜索界面的时候，添加回退按钮  -->
      <view @click="returnArticleList" :style="{top:statusHeight + 'rpx'}"
       class="return-icon" v-if="isSearch">
        <uni-icons type="back" size="22" color="white"></uni-icons>
      </view>

      <view @click="goSearchPage" class="nav-bar-content" 
      :style="{marginRight:marginRight + 'rpx',marginLeft:isSearch?'20rpx':''}">
        <uni-icons class="nav-bar-search-icon" type="search" color="#999"></uni-icons>
        <view v-if="!isSearch" class="nav-bar-search-txt">输入文章标题进行搜索</view>
        <input @confirm="changeInputVal" confirm-type="search" 
        v-else class="search-input" v-model.trim="searchVal" type="text" placeholder="输入文章标题进行搜索">
      </view>
    <