实战8_搜索组件开发|uniapp专题 | 前端进阶之旅

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

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

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

发现页

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

发现页相关代码：

<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">