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

最新推荐文章于 2024-09-03 00:27:17 发布

渐离~~

最新推荐文章于 2024-09-03 00:27:17 发布

阅读量2.1k

点赞数

分类专栏： uni app

本文链接：https://blog.csdn.net/zo429515/article/details/105784604

版权

uni app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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: "活跃"
							});
					}
				}
			}
			
		}