本节主要讲如何引入搜索组件，以及如何定制搜索组件。

# 发现页与视频页面添加标题栏

细心的小伙伴早就可能发现了首页与视频页面并没有头部。这一块头部的添加是相关联搜索的，需要特殊处理一下，因此放到这一节来说。

发现页

由于发现页面布局的改变，因此原有的代码也是需要进行稍微的调整，改为：头部标题栏 + 滚动浏览区域。

发现页相关代码：

<view>
  <!-- 头部 -->
  <uni-nav-bar fixed status-bar>
	<block slot="left"><image class="top-img" src="/static/image/search/6.png"></image></block>
	<view class="top-search flex-box">
	  <image class="search-icon" src="/static/image/search/2.png"></image>
	  {{ searchTxt }}
	</view>
	<!-- #ifdef APP-PLUS || H5 -->
	<block slot="right"><image class="top-img" src="/static/image/mine/r.png"></image></block>
	<!-- #endif -->
  </uni-nav-bar>
  <!-- 滚动区域 -->
  <view class="page-content">
	<mescroll-uni ref="mescroll" :fixed="false" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
	  滚动区域内容
	</mescroll-uni>
  </view>
</view>
.page-content {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0px;
  /* #ifdef H5 || MP-WEIXIN */
  top: 44px;
  /* #endif */
}

@前端进阶之旅: 代码已经复制到剪贴板

在发现页与视频页面上的搜索框并不是 input 表单控件，是直接由 view 模拟的。

上面介绍了页面标题栏，那么就是确定了搜索的入口了。我们要实现的是点击首页的模拟搜索框，然后搜索页出现的交互。接下来我们开始开发这个组件。

# 开发搜索组件

类似这样的窗口类的组件页面，我们在定义的时候，就要控制显示及隐藏。

<template>
  <view class="search-page" v-if="isShow">
	主体内容
  </view>
</template>
data() {
  return {
	  isShow: false
  }
},
methods: {
  close () {
		this.$emit('close')  // 分发关闭事件给父组件监听
		this.isShow = false
	// 业务逻辑
  },
  open () {
		this.isShow = true
	// 业务逻辑
  },
}

@前端进阶之旅: 代码已经复制到剪贴板

这样就可以在父页面进行引入调用，控制搜索组件显示及隐藏了。

<search ref="search" @close="closeSearch"></search>
import search from '@/components/search.vue';
export default {
  components: {
		search
  },
  methods: {
		// 打开搜索
		openSearch() {
			this.$refs.search.open()
		},
		// 监听关闭搜索
		closeSearch() {
			// 业务逻辑
		}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

说完搜索组件的调用，接下来讲解一下如何写实现页面

发现页

这个组件的布局相关代码：

<template>
  <view class="search-page" v-if="isShow">
	<!-- 头部 -->
	<uni-nav-bar fixed :isShowLeft="false" :status-bar="true" @clickLeft="goCloud" @clickRight="goCloud">
	  <view class="search-box  flex-box">
		<view class="top-search flex-box flex-item">
		  <image class="search-icon" src="/static/image/search/2.png"></image>
		  <input class="flex-item" :focus="isFocus" type="text" v-model="searchTxt" @confirm="addSearch" confirm-type="search">
		</view>
		<view class="cancle" @click="close">取消</view>
	  </view>
	  <!-- #ifdef APP-PLUS || H5 -->
	  <block slot="right"><image class="top-img" src="/static/image/search/1.png"></image></block>
	  <!-- #endif -->
	</uni-nav-bar>
	<!-- 滚动区域 -->
	<scroll-view class="page-content">
	  内容区域
	</scroll-view>
  </view>
</template>

@前端进阶之旅: 代码已经复制到剪贴板

关键代码：

<input class="flex-item" :focus="isFocus" type="text" v-model="searchTxt" @confirm="addSearch" confirm-type="search">

@前端进阶之旅: 代码已经复制到剪贴板

:focus="isFocus" 获取焦点，是否唤起键盘；
v-model="searchTxt" 监听输入值；
confirm-type="search" 键盘右下角按钮显示为搜索（仅在 type=“text” 时生效）；
@confirm="addSearch" 点击右下角搜索执行 addSearch 事件。

整个交互逻辑是从发现页点击入口加载这个页面，然后输入框自动聚焦，唤起软键盘。输入框输入文字后点击软键盘的搜索完成一次搜索。软键盘弹出后，点击非置焦区域可收起软键盘。点击输入框旁边的取消关闭搜索组件。

由于当前开发的输入框不是 app 平台的原生输入框，存在一个问题是当 input 获得焦点，键盘弹起，然后不点击键盘的完成，就无法关闭键盘。官方作出解释：

App 平台在 iOS 上，webview 中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。如不想显示这个横条，可以配置 softinputNavBar: ‘none’。

配置方式，在 pages.json 中配置 style

"app-plus": {
	"softinputNavBar": "none"
}

@前端进阶之旅: 代码已经复制到剪贴板

在 pages.json 单个页面的设置：

{
  "path": "pages/index/index",
  "style": {
	"navigationBarTitleText": "发现",
	"navigationStyle": "custom",
	"app-plus":{
	  "titleNView": false,
	  "bounce" : "none", // 取消iOS回弹,避免和下拉刷新冲突
	  "disableScroll": true,   // Android小程序卡顿
	  "softinputNavBar": "none"
	}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

原生输入框在iOS上不会有软键盘上方的横条。

# 使用 storage 存储搜索记录

这一块的信息一般就是由前端的存储机制去做了，在这使用 Uniapp 的 uni.setStorageSync() ，uni.getStorageSync() 进行存取搜索历史。

// 获取搜索历史
getSearchList () {
  try {
	  const value = uni.getStorageSync('searchlist');
	  if (value) {
	  this.historyList = JSON.parse(value)
	  }
  } catch (e) {
	  // error
  }
},
// 清除历史
clearSearch () {
  uni.showModal({
	  title: '',
	  content: '确认清除全部历史记录？',
	  success: res => {
		  if (res.confirm) {
		uni.setStorageSync('searchlist', '')
		this.historyList = []
		  } else if (res.cancel) {
			  // console.log('用户点击取消');
		  }
	  }
  });

},
// 添加搜索
addSearch () {
  const txt = this.searchTxt.trim()

  if (txt.length == 0) {  // 空字符不添加
	return false
  }

  const tempIndex = this.historyList.indexOf(txt)
  if (tempIndex !== -1) {  // 如果存在相同的删除旧的
	this.historyList.splice(tempIndex, 1)
  }

  // 插入数组前
  this.historyList.unshift(txt)
  if (this.historyList.length > 7) {  // 数组长度7
	this.historyList = this.historyList.slice(0, 7)
  }
  uni.setStorageSync('searchlist', JSON.stringify(this.historyList))
},

@前端进阶之旅: 代码已经复制到剪贴板

# 使用防抖功能优化请求

防抖(debounce)：单位时间内多次触发只会执行一次，即如果短时间内大量触发同一事件，只会执行一次函数。

这个在前端开发的过程中比较容易遇到，经常需要绑定一些持续触发的事件，如 resize、scroll、mousemove、change 等等，但我们并不希望在事件持续触发的过程中那么频繁地去执行函数。防止高频率的触发请求后台服务器。

我们要做的优化策略是当事件被触发时，设定一个周期延迟执行搜索动作，若期间又被触发，则重新设定周期，直到周期结束，执行搜索动作。这样搜索的请求控制在一定时间内。

防抖代码：

// 防抖
function debounce(fn, wait = 300) {
    var timeout = null;
    return function() {
        if(timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

代码使用：

像很多抢票、抢购这类操作很多都加了防抖优化策略，为了避免用户大量点击造成服务器压力，当固定时间内，不论点击多少次，只执行一次抢的动作。

感兴趣的小伙伴可以扩展了解一下与防抖实现的效果类似的节流。

业界最标准的当属 lodash 库的两个方法，debounce，throttle，有兴趣的可以查看源码。

当前的搜索组件的主要逻辑就是这么多，引入到发现页与视频页即可。

实战8_搜索组件开发|uniapp专题

实战8_搜索组件开发|uniapp专题