uni-app中实现动态导航栏

1.动态导航栏 参数为字符串

原理：同一页面的两处跳到同一页面，通过路由携带导航标题参数和uni-app中自定义导航栏API–uni.setNavigationBarTitle实现

index.vue

<template>
	<view @click="toSearch('搜索')"></view>
	<view @click="toSearch('全部')"></view>
</template>

<script>
	export default {
		...
		methods: {
			toSearch (title) {
				this.$router.navigateTo({
					url: `/pages/search/search?title=${title}`
				});
			}

		}
	}

search.vue

<script>
	<template>
		<input :focus=" title == '搜索' ? true :false "/>
	</template>

	export default {
		data () {
			title:''
		}
		methods: {
			onLoad (option) {
				console.log(option)//{title:'搜索'}
				if (option && option.title) {
				this.tilte = option.title
				//自定义导航栏API
                uni.setNavigationBarTitle({
                    title: option.title
                });
            }
			}

		}
	}

</script>

2.同一页面，根据不同导航栏内容，小键盘的显示与隐藏

注意点：将字符串参数变成数字类型参数，防止乱码出现

index.vue

<template>
	<view @click="toSearch('1')"></view>
	<view @click="toSearch('2')"></view>
</template>

<script>
	export default {
		...
		methods: {
			toSearch (type) {
				this.$router.navigateTo({
					url: `/pages/search/search?type=${type}`
				});
			}

		}
	}

search.vue

<template>
	<input focus=' type == 1 '/>
</template>

<script>
	export default {
		data () {
			type: '',
			titleMap: {
				1: '搜索',
				2: '全部酒店'
			}
		}
		methods: {
			onLoad (option) {
				if (option && option.type) {
				this.type = option.type;
				//自定义导航栏API
                uni.setNavigationBarTitle({
                	// || 是为了容错
                    title: this.titleMap[this.type] || '搜索';
                });
            }
			}

		}
	}

</script>