foreword

The home page will provide a search box to customers, allowing customers to search for the content they want. Here, a navigation bar is needed to realize the jump to the search page. The effect is as follows

App, H5 effect

applet effect

1. Compatible with APP and H5

In the common titleNView configuration code example, you can see the code of the basic style as follows

{
	"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时点击输入框不置焦，可以跳到新页面搜索
						}
					}
				}
			}
		}
		...
	]
}

We don't need all the content. This time I will introduce the combination of "buttons" and "searchInput". The buttons here are actually the two pictures on the left and right of my navigation bar, which can be used with the icon to achieve the desired function. , searchInput is the middle search box

It needs to be configured in pages.json and can be added in the button, but it should be noted that no matter adding text or vector images, the default is to float right, you can change one of them to float left, here I use Alibaba vector Pictures of the gallery, download files, and import them. I can provide a folder for free for those who need it.

The configuration code is as follows

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

In order to achieve the effect of jumping, I want to create a folder at the same level of the page. For the search page, we want the home page to use the page life cycle onNavigationBarSearchInputClicked (this time the folder needs to be registered in pages.json)

to jump to the page we want first

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

2. Compatible applet

You need to create a components folder at the same level as pages. In this folder, you can register without importing it with import, and create a slot subfolder as follows with a directory with the same name. None of the files in components need to be registered in pages.json. (The main way to implement here is to display a search box through the style written by yourself)

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

Introduce slots on the home page (if you don't know or forget, you can learn the slot teaching from bloggers), the pictures are imported Alibaba vector pictures, the pictures are prepared in advance by me, there are Anyone you want, chat with me privately. The following is what I prepared in advance, just use class to import

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

Here, you also need to click the search navigation to jump to the search page (this time the folder needs to be registered in pages.json), which is done through the @click binding event, and the path is the same method (create a dedicated search page)

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

css style code

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

Third, to achieve simultaneous compatibility

Through the above code, the search box navigation bar has been realized in app, h5, and applet, but if you want to satisfy app, h5, and applet at the same time, you need to make a regional judgment.

If it is not displayed according to compatibility, and the two search box navigation bars above are configured at the same time, two search boxes will appear in the app and h5 because they are compatible with the configuration of the applet

But there is only one applet, because the applet is not compatible with the search box configured in pages.json

Don't be nervous at this time, do we still remember media query, the method here is almost the same as media query, use a specific style in a specific environment, we can find conditional compilation through the official website document here

It is very simple to use, as long as the code is wrapped in the condition, we only need to wrap the applet here, only in the condition compiled in the WeChat applet

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

code show as below

Wrap the navigation bar of the applet configured on the home page ( the applet is not compatible with the configuration in pages.json, so you don't need to care about whether conditional compilation is required here ) In this way, the search box navigation of the applet will not appear in the app and h5. . Thereby achieving the effect of simultaneous compatibility.

	<!--#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-->

[WeChat applet] Use uni-app - develop the homepage search box navigation bar (compatible with APP, H5, and applet at the same time)