prefacio

La página de inicio proporcionará un cuadro de búsqueda a los clientes, lo que les permitirá buscar el contenido que desean. Aquí, se necesita una barra de navegación para realizar el salto a la página de búsqueda. El efecto es el siguiente

Aplicación, efecto H5

efecto subprograma

1. Compatible con la aplicación y H5

En el ejemplo de código de configuración común de titleNView, puede ver el código del estilo básico de la siguiente manera

{
	"pages": [{
			"path": "pages/index/index", //首页
			"style": {
				"app-plus": {
					"titleNView": false //禁用原生导航栏
				}
			}
		}, {
			"path": "pages/log/log", //日志页面
			"style": {
				"app-plus": {
					"bounce": "none", //关闭窗口回弹效果
					"titleNView": {
						"buttons": [ //原生标题栏按钮配置,
							{
								"text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
							}
						],
						"backButton": { //自定义 backButton
							"background": "#00FF00"
						}
					}
				}
			}
		}, {
			"path": "pages/detail/detail", //详情页面
			"style": {
				"navigationBarTitleText": "详情",
				"app-plus": {
					"titleNView": {
						"type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
					}
				}
			}
		}, {
			"path": "pages/search/search", //搜索页面
			"style": {
				"app-plus": {
					"titleNView": {
						"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
						"searchInput": {
							"backgroundColor": "#fff",
							"borderRadius": "6px", //输入框圆角
							"placeholder": "请输入搜索内容",
							"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
						}
					}
				}
			}
		}
		...
	]
}

No necesitamos todo el contenido. Esta vez presentaré la combinación de "botones" y "búsqueda de entrada". Los botones aquí son en realidad las dos imágenes a la izquierda y a la derecha de mi barra de navegación, que se pueden usar con el ícono para lograr la función deseada. , searchInput es el cuadro de búsqueda central

Debe configurarse en pages.json y se puede agregar en el botón, pero debe tenerse en cuenta que no importa agregar texto o imágenes vectoriales, el valor predeterminado es flotar a la derecha, puede cambiar uno de ellos para flotar a la izquierda, aquí I Utilice las imágenes vectoriales de Alibaba de la galería, descargue archivos e impórtelos. Puedo proporcionar una carpeta de forma gratuita para quienes la necesiten.

El código de configuración es el siguiente

"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "小余努力搬砖",
				"app-plus": {
					"titleNView": {
						"searchInput": {
							"backgroundColor": "#f4f4f4",
							"borderRadius": "6px", 
							"placeholder": "请输入搜索内容",
							"disabled": true 
						},
							"buttons": [
						{
							"fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径
							"float": "left",
							"text": "\ue67a",	//引入图片一定要带u			
							"fontSize": "24px",//大小
							"color": "#666666"
						},
						{	
							"float": "right",
							"text":"\ue661",
							"fontSrc": "/static/font/iconfont.ttf",
							"fontSize": "24px",
							"color": "#666666"
						}
										]
}}}

Para lograr el efecto de salto, quiero crear una carpeta en el mismo nivel de la página. Para la página de búsqueda, queremos que la página de inicio use el ciclo de vida de la página onNavigationBarSearchInputClicked (esta vez la carpeta debe estar registrada en páginas.json)

para saltar a la página que queremos primero

onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		}

2. Subprograma compatible

Debes crear una carpeta de componentes al mismo nivel que las páginas, en esta carpeta puedes registrarte sin importarla con import y crear una subcarpeta de slots de la siguiente manera con un directorio con el mismo nombre. Ninguno de los archivos de los componentes debe registrarse en pages.json. (La forma principal de implementar aquí es mostrar un cuadro de búsqueda a través del estilo escrito por usted mismo)

<template>
	<view class='slot'>
		<slot name='left'></slot>
		<slot name='center'></slot>
		<slot name='right'></slot>
		
	</view>
</template>

<script>
	export default {
		name:"search-slot",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
.slot{
	width: 750rpx;
	display: flex;
}
</style>

Introduzca tragamonedas en la página de inicio (si no sabe u olvida, puede aprender la enseñanza de tragamonedas de los bloggers), las imágenes son imágenes vectoriales de Alibaba importadas, las imágenes las preparo yo con anticipación, hay Cualquiera que desee, chatee conmigo en privado. Lo siguiente es lo que preparé de antemano, solo use la clase para importar

<search-slot class='flex'>
	<view class="left" slot='left'>
		<text class="iconfont icon-xiaoxi"></text>
	</view>
	<view class="center" slot='center'>
		<text class="iconfont icon-sousuo" @click="search"></text>
	</view>
	<view class="right" slot='right'>
		<text class="iconfont icon-richscan_icon"></text>
	</view>
</search-slot>

Aquí, también debe hacer clic en la navegación de búsqueda para ir a la página de búsqueda (esta vez, la carpeta debe estar registrada en pages.json), lo cual se realiza a través del evento de vinculación @click, y la ruta es el mismo método (crear una página de búsqueda dedicada)

methods: {
search(){
	uni.navigateTo({
	url:'../search/search'
})
				
}}

código de estilo css

<style>
.flex {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		align-items: center;
	}

	.left {
		width: 44rpx;
		flex: 0 0 44px;
		align-items: center;
		text-align: center;
	}

	.center {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #eee;
		text-align: center;
		color: #ccc;
	}

	.right {
		width: 44rpx;
		flex: 0 0 44px;
		align-items: center;
		text-align: center;
		
	}
</style>

En tercer lugar, para lograr la compatibilidad simultánea

A través del código anterior, la barra de navegación del cuadro de búsqueda se ha realizado en la aplicación, h5 y el subprograma, pero si desea satisfacer la aplicación, el h5 y el subprograma al mismo tiempo, debe hacer un juicio regional.

Si no se muestra de acuerdo con la compatibilidad, y las dos barras de navegación del cuadro de búsqueda anteriores están configuradas al mismo tiempo, aparecerán dos cuadros de búsqueda en la aplicación y h5 porque son compatibles con la configuración del applet.

Pero solo hay un subprograma, porque el subprograma no es compatible con el cuadro de búsqueda configurado en pages.json

No se ponga nervioso en este momento, ¿todavía recordamos la consulta de medios? El método aquí es casi el mismo que el de la consulta de medios, use un estilo específico en un entorno específico, podemos encontrar compilación condicional a través del documento del sitio web oficial aquí.

Es muy simple de usar, siempre que el código esté envuelto en la condición, solo necesitamos envolver el applet aquí, solo en la condición compilada en el applet de WeChat.

#ifdef  MP
需条件编译的代码
#endif

el código se muestra a continuación

Envuelva la barra de navegación del subprograma configurado en la página de inicio ( el subprograma no es compatible con la configuración en pages.json, por lo que no debe preocuparse si se requiere compilación condicional aquí ) De esta manera, la navegación del cuadro de búsqueda del applet no aparecerá en la aplicación y h5. . Logrando así el efecto de compatibilidad simultánea.

	<!--#ifdef MP -->
		<search-slot class='flex'>
			<view class="left" slot='left'>
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<view class="center" slot='center'>
				<text class="iconfont icon-sousuo" @click="search"></text>
			</view>
			<view class="right" slot='right'>
				<text class="iconfont icon-richscan_icon"></text>
			</view>
		</search-slot>
	<!--#endif-->

[Applet WeChat] Use uni-app: desarrolle la barra de navegación del cuadro de búsqueda de la página de inicio (compatible con APP, H5 y applet al mismo tiempo)