09_搜索框.md · dalaxy/zhufeng_uni_music2104

本章节主要讲解的是如何制定搜索框组件和引入搜索框组件

### 页面添加搜索框

按照我们听音乐的习惯，应该是有搜索框的存在，位置在标题栏上。所以搜索框应该是在 `发现`   和 `视频`  两个页面头部标题栏上进行添加。以 `发现`  页面为例
因为页面添加搜索框布局页面有所变化，因此进行代码调整。
相关代码

```js
	<view>
		
		<view :class="{dpn: isShowSearch}">
			<uni-nav-bar fixed :status-bar="true" @clickLeft="goCloud" @clickRight="goCloud">
				<block slot="left">
					<image class="top-img" src="/static/image/search/7.png"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch">
					<image class="search-icon" src="/static/image/search/2.png"></image>
					{{ searchTxt }}
				</view>
				
				<block slot="right">
					<image class="top-img" src="/static/image/mine/r.png"></image>
				</block>
				
			</uni-nav-bar>

<mescroll-uni ref="mescroll" :top="mescrollTop" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
        滚动区域内容
			</mescroll-uni>
		</view>
		<search ref="search" @close="closeSearch"></search>
	</view>

.page-content {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0px;
  /* #ifdef H5 || MP-WEIXIN */
  top: 44px;
  /* #endif */
}
```

在 `发现`   页面的搜索框并不是 input 表单控件，是直接由 view 模拟的。接下来实现的是点击首页的模拟搜索框，然后搜索页出现的交互效果。

### 搜索框组件

开发搜索框组件的代码单独放在 `components/search.vue`  文件中。实现的效果：控制这个窗口的出现和隐藏。
相关的代码:

```js
<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
	// 业务逻辑
  },
}
```

在父页面进行引入调用，控制搜索组件显示及隐藏。

```js
<search ref="search" @close="closeSearch"></search>

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

接下来实现调用组件之后的页面布局

```js
<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>

//:focus="isFocus" 获取焦点，是否唤起键盘;v-model="searchTxt" 监听输入值;
      //confirm-type="search" 键盘右下角按钮显示为搜索（仅在 type="text" 时生效）
      //@confirm="addSearch" 点击右下角搜索执行 addSearch 事件
		  <input class="flex-item" :focus="isFocus" type="text" v-model="searchTxt" @confirm="addSearch" confirm-type="search">
		</view>
		<view class="cancle" @click="close">取消</view>
	  </view>
	  
	  <block slot="right"><image class="top-img" src="/static/image/search/1.png"></image></block>
	  
	</uni-nav-bar>
	
	<scroll-view class="page-content">
	  内容区域
	</scroll-view>
  </view>
</template>
```

![22_sesrch](https://images.gitee.com/uploads/images/2021/0511/175947_e039a616_1720749.png "22_sesrch.png")

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

> 由于当前开发的输入框不是 app 平台的原生输入框，存在一个问题是当 input 获得焦点，键盘弹起，然后不点击键盘的完成，就无法关闭键盘。官方作出解释：
>
> App 平台在 iOS 上，webview 中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。如不想显示这个横条，可以配置 softinputNavBar: 'none'。
> 所以在 package.json 中进行配置：

```json
{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "发现",
    "navigationStyle": "custom",
    "app-plus": {
      "titleNView": false,
      "bounce": "none", // 取消iOS回弹,避免和下拉刷新冲突
      "disableScroll": true, // Android小程序卡顿
      "softinputNavBar": "none" //不想显示软键盘上方的横条
    }
  }
}
```

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

### 存储搜索记录

存储搜索记录的信息一般是由前端的存储机制去做，要使用 uni-app 的  `uni.setStorageSync()` ，`uni.getStorageSync()`  进行存取搜索历史。
相关代码:

```javascript
// 获取搜索历史
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))
},
```

![22_storage](https://images.gitee.com/uploads/images/2021/0511/180029_62ebfbab_1720749.png "22_storage.png")

### 防抖功能优化

`防抖定义` ：单位时间内多次触发只会执行一次，即如果短时间内大量触发同一事件，只会执行一次函数。
`优化策略`  是当事件被触发时，设定一个时间周期延迟执行搜索动作，若期间又被触发，则重新设定周期，直到周期结束，才执行搜索动作。这样搜索的请求控制在一定时间内。

```javascript
// 防抖代码
function debounce(fn, wait = 1000) {
  var timeout = null;
  return function () {
    if (timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(fn, wait);
  };
}
```

dalaxy/zhufeng_uni_music2104

简介

发行版

贡献者

近期动态

dalaxy/zhufeng_uni_music2104 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

dalaxy/zhufeng_uni_music2104