uniApp学习(8)搜索框的创建和自动获取焦点

1、跳转到搜索页面功能

点击搜索跳转，显示热门搜索和，搜索历史

结果如下所示

1、创建搜索页search.vue
配置pages.json页面配置app-plus导航搜索页面(这个只针对h5和APP有用)

{
			"path": "pages/search/search",
			"style": {
				"navigationBarTitleText": "",
				"app-plus": {
					"bounce": "none", //关闭回弹效果
					"titleNView": {
						"softinputNavBar":"none",
						 "autoBackButton": false, //隐藏左侧后退按钮（APP） 
						"searchInput": {
							"align": "left",
							"placeholder": "搜索你想要的内容",
							"borderRadius": "30rpx",
							"backgroundColor": "#f0f1f2"
						},
						"buttons": [{
							"float": "right",
							"text": "取消",
							"fontSize": "16",
							"color": "#2A333B"
						}]
					}
				}
			}

效果如下所示

2、小程序从index.vue跳转到search.vue的方法

在首页index.vue中的添加 @click.native=“navTo(’/pages/search/search’)”

<template>
	<view >
		<!-- #ifdef MP -->
		<!-- 搜索框在小程序中显示 -->
		<search-input @click.native="navTo('/pages/search/search')"></search-input>
		<!-- #endif -->
	</view>
</template>

3、App跳转到search.vue的方法
onNavigationBarSearchInputClicked这个是App端监听输入框被点击时候触发的方法，直接在index.vue下面添加，与methods同级

// this.navTo因为mixin.js在main.js中全局引入
		// 采用this 因为是在当前的Vue实例里面的
		onNavigationBarSearchInputClicked() {
			// console.log("-------")
			// uni.navigateTo({
			// 	url:'/pages/search/search'
			// })
		     this.navTo('/pages/search/search')
		
},

navTo是全局引入的方法

navTo(url, options={}){
			if(!url){
				return;
			}
			if(options.login && !this.$store.getters.hasLogin){
				url = '/pages/auth/login';
			}
			uni.navigateTo({
				url
			})
		},

4、在在category.vue 分类页面进入搜索页面的方法

onNavigationBarButtonTap监听原生导航按钮点击的方法

// 监听原生导航按钮事件
onNavigationBarButtonTap(e) {
	// 搜索按钮
	if(e.index === 0) {
		// 在 /common/mixin/mixin.js 中定义了
		this.navTo('/pages/search/search')
	}
},`

5、category.vue 标签名进入搜索页面，methods 选项的 clickLabel 实现跳转

// 点击标签,跳转搜索页面
clickLabel(item) {
// 注意：labelId放到第1个位置，后面解析时要用，顺序一定不能乱
// activeIndex 选中分类下标，方便父组件重新选择分类时，默认选中当前分类
	const params = { labelId: item.id, name: item.name, activeIndex:this.activeIndex}
		uni.navigateTo({
			url: `/pages/search/search?params=${ JSON.stringify(params) }`
		})
}

2、在search.vue加载页面onload中接收参数，如果传递过来有值，说明来自

没有值说明来自index输入框或者查询按钮，则需要获取焦点

onLoad(option) {
			// #ifdef APP-PLUS
			//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用    plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
			currentWebview = this.$scope.$getAppWebview();
			// #endif

			// 如果有参数则不用自动获取焦点
			if (option.param) {
				console.log("option", JSON.parse(option.param))
				this.param = JSON.parse(option.param)
				this.doSearch()
			}
			// 没有参数则自动获取焦点 
			else {
				// #ifdef APP-PLUS
				console.log("自动获取焦点")

				currentWebview.setTitleNViewSearchInputFocus(true)
				// #endif
				// #ifdef MP
				// 小程序获取焦点
				this.focus = true
				// #endif
			}
		},

3、兼容小程序搜索框

1. 创建官方提供的模板项目，点击HuilderX菜单栏的：文件》新建》项目，打开新建项目窗口，如下操作：
2. 
3. 拷贝 hello-uni-app 项目中的 /components/uni-search-bar/uni-search-bar.vue 搜索组件到我们项目中。
   
4. 将 uni-search-bar.vue 图标相关的注释掉，替换 text 标签以类名方式引入对应图标，可在 css 中将边框去
   除和高度调整。
   
   在 search.vue 中引用 uni-search-bar.vue 组件
   注意：
   如果组件是在 /components 目录下，且 /components 的子目录名和组件名相同时，可以不需要
   import 导入它。
   如上面 uni-search-bar.vue 目录结构即可省略 import ，直接在模板代码中使用这个组件即可。
   doSearch(obj)方法，添加 obj 参数，接收一个输入框的数据对象 {value: ‘xxxx’}

下面的就是小程序显示的搜索框和取消

<template>
<view class="search-container">
<!-- #ifdef MP -->
		<!-- 小程序搜索框, 不要少了 ref="searchBar" 后面要用 -->
		<!-- 注意：navBack() 不要少了括号，不然后退不了（mixin.js定义了） -->
		<uni-search-bar ref="searchBar" radius="100" placeholder="搜索你想要的内容"
		clearButton="auto"
		cancelButton="always" @confirm="doSearch" @cancel="navBack()" />
<!-- #endif -->
</view>
</template>

小程序uni-search-bar 采用this.$emit方式向父组件传递输入框的值

this.$emit("confirm", {
					value: this.searchVal
})

@confirm="doSearch"调用父组件doSearch的方法

<script>
	// 当前页面实例变量，声明外面提高性能
	let currentWebview = null
	export default {
		data() {
			return {
				params: null, // 其他页面跳转到此页面带上的参数,
				content: null, //搜索内容
			}
		},
		//...,
		methods() {
			// 搜索
			doSearch(obj) {
				// obj有数据，则获取
				this.content = obj && obj.value ? obj.value : this.content
				console.log(this.content)
				uni.showLoading()
			},
		},
	}
</script>

4、小程序搜索框自动获取焦点

1. 小程序进入搜索页面，搜索框自动获取焦点。
   实现此功能，要在 uni-search-bar.vue 的 props 声明 focus 属性，并添加针对 focus 添加一个监听器来设
   置焦点

	props: {
			focus: { // 是否获取焦点 +++
				type: Boolean,
				default: false
			},
			
		},

		watch: {
			// 设置焦点 ++++
			focus: {
				handler(newVal) {
				
					if (newVal) {
						// 获取焦点，
						this.searchClick()
					}
				},
				immediate: true
			},

		},

2. 修改 search.vue 页面中的传递获取焦点属性: focus = “focus”，data 选项中声明 focus 属性， onLoad赋值中赋值true真机预览才有效果…
   当onload 没有参数则ifdef MP中小程序判断，设置focus为true触发焦点

<template>
</template>
<!-- focus 是否获取焦点 -->
<uni-search-bar :focus="focus" radius="100" placeholder="搜索你想要的内容" clearButton="auto" cancelButton="always" @confirm="doSearch"
 @cancel="navBack()" />

<script>
	data() {
			return {
				params: null, // 其他页面跳转到此页面带上的参数,
				content: null, //搜索内容
				focus: false, //搜索框获取焦点
			}
		},

		onLoad(option) { // option接收其他页面传递过来的参数
			// #ifdef APP-PLUS
			currentWebview = this.$mp.page.$getAppWebview()
			// #endif

			// 获取其他页面跳转过来带的参数，
			if (option.params) {
				// 转换对象
				this.params = JSON.parse(option.params)
				console.log('params', this.params)
				// 有参数，则开始搜索
				this.doSearch()
			} else {
				// #ifdef APP-PLUS
				//点击搜索框获取焦点, 因为分类页会跳转到此页面后不用获取焦点，所以不在pages.json
				中开启自动获取焦点
				currentWebview.setTitleNViewSearchInputFocus(true)
				热门与历史关键字提示组件
				1. 需求： 进入搜索页面后， 显示热门搜索和历史搜索关键字， 带历史搜索带清空按钮， 如下图
				2. 创建 / pages / search / components / keyword.vue 关键词页面， 其中模板代码如下
				// #endif

				// #ifdef MP
				// 页面加载即获取焦点，真机测试才有效 +++
				this.focus = true
				// #endif
			}
		},
</script>

<style>
</style>