uni app 使用分段器之后如何动态自定义导航栏标题

1.在官网引用分段器 详细地址 https://ext.dcloud.net.cn/plugin?id=54 看会就明白

//分段器使用
<uni-segmented-control :current="current" :values="items.map(i=>i.title)" @clickItem="onClickItem" style-type="text"
		 active-color="#d9c917"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<recommend></recommend>
			</view>
			<view v-show="current === 1">
				<hot></hot>
			</view>
			<view v-show="current === 2">
				<dynamic></dynamic>
			</view>
		</view>

2.组件引入

   import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue" //分段器组件
	import dynamic from "@/components/active/dynamic.vue"
	import recommend from "@/components/active/recommend.vue"
	import hot from "@/components/active/hot.vue"
	export default {
		components: {
			uniSegmentedControl,
			dynamic,
			recommend,
			hot
		},
			data() {
			return {
				items: [{
					title: "推荐"
				}, {
					title: "热门"
				}, {
					title: "活跃"
				}],
				current: 0,
				params: {}
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
		}

3 主要是用到2个知识点 watch监听 和动态设置导航栏标题uni.setNavigationBarTitle
监听current的变化 只要一改变就改变标题

	watch: {
			current: {
				immediate: true,
				handler(value) {
					switch (value) {
						case 0:
							return uni.setNavigationBarTitle({
								title: "推荐"
							});
						case 1:
							return uni.setNavigationBarTitle({
								title: "热门"
							});
						case 2:
							return uni.setNavigationBarTitle({
								title: "活跃"
							});
					}
				}
			}
			
		}

4.最后看看效果