uni app 使用分段器之后如何动态自定义导航栏标题_uni-segmented-control items 动态-程序员宅基地

技术标签: 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.最后看看效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zo429515/article/details/105784604

智能推荐

**The sip module implements API v11.0 to v11.2 but the PyQt5.QtCore module requires API v11.3**_the pyqt5.qtcore module failed to register with th-程序员宅基地

文章浏览阅读3.6k次。*The sip module implements API v11.0 to v11.2 but the PyQt5.QtCore module requires API v11.3*情况一 SIP版本不匹配我在使用PyQt5时遇到了这个问题:“sip模块实现了API v11.0到v11.2,但PyQt5.QtWidgets模块需要API v11.3”pip列表sip 4.18,但是使..._the pyqt5.qtcore module failed to register with the sip module

Lesson1强化学习(RL)初印象 学习笔记_rl编程-程序员宅基地

文章浏览阅读467次。Lesson1强化学习(RL)初印象_rl编程

mysql存储过程执行返回-1_mysql简单存储过程创建并返回执行结果-程序员宅基地

文章浏览阅读825次。DROP PROCEDURE IF EXISTS `create_appeal`;DELIMITER $$CREATE PROCEDURE `create_appeal`(IN userId INT,IN userName VARCHAR(20),IN historyId VARCHAR(20),IN productId INT,IN tourneyId INT,IN roundId TINY..._mysql8 创建存储过程返回 -1

过滤器防止xss攻击_xss过滤器-程序员宅基地

文章浏览阅读950次。将参数中有关xss攻击的非法字符全部处理掉。_xss过滤器

最美纪念日-程序员宅基地

文章浏览阅读58次。有问题请留言:[email protected]

(附源码)计算机毕业设计SSM智慧消防维保系统后端设计与实现_智慧消防 代码货栈-程序员宅基地

文章浏览阅读545次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:SSM + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。_智慧消防 代码货栈

随便推点

基于matlab+模板匹配的车牌识别_255 * mx / (xmax - xmin)-程序员宅基地

文章浏览阅读3.2w次,点赞51次,收藏422次。一、前言 随着我国经济的快速发展,汽车拥有量的急剧增加,公路交通成为我国重要的交通运输途径,是国家大力发展的基础设施之一。因此,交通管理的现代化和智能化就越来越显得重要和亟迫。利用电子信息技术来提高管理效率、交通效率和打造安全的智能交通系统已成为当前交通管理发展的主题。实现交通管理现代化和智能化的核心技术之一就是车牌自动识别技术。与传统的车辆管理方法相比,它大大提高了管理效率和水平..._255 * mx / (xmax - xmin)

MetaGPT多智能体开发_metagpt调用qwen-程序员宅基地

文章浏览阅读971次,点赞15次,收藏16次。在MetaGPT看来,可以将智能体想象成环境中的数字人,其中智能体 = 大语言模型(LLM) + 观察 + 思考 + 行动 + 记忆这个公式概括了智能体的功能本质。举例说明:智能体为某后开发工程师角色那多智能体意味着什么呢如图例说明:你是一个软件公司的老板以上多智能体意味着一句话实现一个小型应用的开发:样例(由GPT-4生成)例如,如果你执行,将会得到包括数据类型&API设计在内的输出生成一个包含分析和设计内容的样例的成本约为(使用GPT-4),而生成一个完整项目的成本约为。在这里插入图片描述。_metagpt调用qwen

储能容量优化配置及经济调度模型:基于粒子群算法和遗传算法的混合发电系统调峰方案-程序员宅基地

文章浏览阅读282次。其次,引入粒子群算法,结合含有抽水蓄能机组的混合发电系统的调峰经济调度模型,提出双层储能容量优化配置的方法。而将粒子群算法与含有抽水蓄能机组的混合发电系统的调峰经济调度模型相结合,可以获得储能的最优容量配置,进一步提高混合发电系统的经济性和效益。通过介绍遗传算法和粒子群算法的原理及其在该问题中的应用,并进行实验验证,展示了双层储能容量优化配置的有效性和优越性。本人亲子编写,可修改,上层用遗传算法出容量配置,下层粒子群算法出运行调度计划,以成本最低得到含抽水蓄能机组的混合发电系统的调峰经济调度模型。

Python-PyCharm 报错解决:ImportError: cannot import name 'InteractiveConsole' from 'code'-程序员宅基地

文章浏览阅读5.4k次。此文首发于我的个人博客:Python-PyCharm 报错解决:ImportError: cannot import name ‘InteractiveConsole’ from ‘code’ — zhang0peter的个人博客早上在用PyCharm跑Python代码时遇到报错:Traceback (most recent call last): File "C:\Users\pete..._importerror: cannot import name 'interactiveconsole' from 'code

Layui下拉框赋值,局部刷新_layui刷新下拉框-程序员宅基地

文章浏览阅读645次。Layui下拉框_layui刷新下拉框

如何通过Vue.js脚手架工具搭建Vue.js项目_npm 安装脚手架-程序员宅基地

文章浏览阅读806次,点赞16次,收藏20次。通过npm全局安装@vue/cli脚手架 ,@3.10表示下载某个指定版本,如果不写,则默认下载最新版本。如果已经安装了 vue-cli (1.x或者2.x) ,需要先卸载,再重新全局安装vue-cli。(首次使用安装 vue 脚手架可跳过此步骤)_npm 安装脚手架