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.最后看看效果
智能推荐
springboot2.2整合spring-data-elasticsearch3.2_spring data elasticsearch health check close sprin-程序员宅基地
文章浏览阅读4k次。环境：Elasticsearch:7.4.1Springboot:2.2.1Spring-data-elasticsearch:3.2.0IDE:STS_3.9.2.RELEASEpom.xml配置<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0..._spring data elasticsearch health check close spring 3.2
图形化编程Mixly——RFID智能门禁_csdnrfidmixly-程序员宅基地
文章浏览阅读2.4k次，点赞2次，收藏11次。文章目录1.软硬件连接2.图形化编程块3.代码块4.实验成果实验材料与环境1、硬件Arduino开发板、舵机SG90、RFID-RC522读卡器、校园卡、杜邦线若干2、软件Mixly IDE（下载地址：https://pan.baidu.com/s/1vKnY-vC4LU0qMFitArEXfw提取码：tbfe）实验内容【1】读取校园卡ID号。【2】读取到指定校园卡时S..._csdnrfidmixly
java/jsp/ssm基于web的多媒体素材管理系统【2024年毕设】_基于web的多媒体素材管理系统zip-程序员宅基地
文章浏览阅读53次。springboot基于Springboot的企业cms内容管理系统。springboot基于Vue和Springboot的会议室管理系统。开发软件：eclipse/myeclipse/idea。springboot中小型企业物流管理系统的设计与实现。springboot微信小程序的食谱大全“食全食美”springboot基于微信小程序的舟袍设计工作室。ssm基于web的佳茗天香茶品销售平台的设计与实现。springboot医考答题练习系统的设计与实现。springboot微信小程序的火锅店点餐系统。_基于web的多媒体素材管理系统zip
vue多种实现动画效果分享【推荐学习】_vue 动画-程序员宅基地
文章浏览阅读1k次。通常我们实现动画效果会用到CSS中的class类，这也是比较基本的方式实现动画。_vue 动画
免费送书！从ROS1到ROS2，无人机编程实战指南-程序员宅基地
文章浏览阅读340次。亲爱的读者们，我们今天非常荣幸地向大家推荐一本全新力作——《从ROS1到ROS2无人机编程实战指南》。这本书站在初学者的角度，从入门到进阶，再到实战，循序渐进，是学习ROS1和ROS2的最佳选择。如今已在全国范围内上市，购书即可享受次日达的快捷服务！本书的创作初衷源于帮助那些渴望投身于无人机或机器人开发的初学者。目前，国内关于ROS的书籍相当稀缺，大部分都是国外翻译版，内容可能更偏向于机器人学的公..._从ros1到ros2无人机编程实战指南
tkinter创建子窗口（只创建一个)_tkinter子窗口-程序员宅基地
文章浏览阅读635次。【代码】tkinter创建子窗口（只创建一个)_tkinter子窗口
随便推点
米家接入HomeKit系列二：通过群辉NAS的Docker搭建HomeAssistant_群晖接入米家-程序员宅基地
文章浏览阅读1.1w次，点赞5次，收藏41次。通过前面的文章我们已经知道我们为什么要搭建HomeAssistant，那么本篇文章我们就来给大家讲解如何通过群辉NAS的Docker搭建HomeAssistant，以及其基本的配置和使用。_群晖接入米家
Windows 10下载安装openjdk及环境变量配置（以openjdk 8为例）_openjdk环境变量配置-程序员宅基地
文章浏览阅读9.2k次，点赞7次，收藏13次。Windows 10下载安装openjdk及环境变量配置（以openjdk 8为例）Windows 10下载安装openjdk及环境变量配置下载地址https://www.azul.com/downloads/zulu-community/?package=jdk安装双击已下载的安装包点击Next，安装目录可以自己定义点击Next进入安装界面进行安装安装完成后显示如下界面设置环境变量1.进入环境变量配置界面1.右键点击计算机–>属性–>高级系统设置–>高级_openjdk环境变量配置
PyTorch如何打印模型详细信息_python打印模型-程序员宅基地
文章浏览阅读1.7k次，点赞2次，收藏15次。如何打印模型_python打印模型
维修Proface普洛菲斯触摸屏GP-4502WW 4301 4501TW 4401T人机界面-程序员宅基地
文章浏览阅读498次，点赞14次，收藏4次。伦茨、KEB、西门子、力士乐、施耐德电气、、鲍米勒、丹佛斯、派克、三菱、Allen Bradley、ABB、罗克韦尔、东芝、Gerfan、松下、Proface、台达、Beckhoff、Omron欧姆龙、Sumitomo住友、Sodick沙迪克、SedoTreepoint、WEINVIEW威纶通、Axiomtek艾讯、Portwell瑞传、Laetus.......等各大知名进口品牌工控机。W275 x H206 x D38.2 毫米 [W10.85 x H8.11 x D1.50 英寸]
Apipost 上手指南_apipost上传文件接口-程序员宅基地
文章浏览阅读4.3k次。Apipost是一个用于Web开发的接口调试工具，由国人开发。目前版本：7.0类似的产品还有，不过个人感觉功能上不如Apipost好用。_apipost上传文件接口
linux单机巡检脚本并发送邮箱的巡检报告-程序员宅基地
文章浏览阅读389次，点赞10次，收藏10次。案例，生成的巡检报告邮件。