当前位置: 首页 > news >正文

uniapp项目实战系列(3):底部导航栏与头部导航栏的配置

目录

  • 系列往期文章(点击跳转)
    • uniapp项目实战系列(1):导入数据库,启动后端服务,开启代码托管(点击跳转)
    • uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置(点击跳转)
  • 底部导航栏与头部导航栏的配置
    • 介绍
    • 功能搭建流程图
    • 3.完整代码


✨ 原创不易,还希望各位大佬支持一下!

👍 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!


系列往期文章(点击跳转)

uniapp项目实战系列(1):导入数据库,启动后端服务,开启代码托管(点击跳转)

uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具的配置(点击跳转)

底部导航栏与头部导航栏的配置

介绍

在本文章中学会在pages.json中进行配置全局标题和每一个页面自己的标题以及学会配置底部导航栏的tabber

功能搭建流程图

在这里插入图片描述
给首页起标题以及全局起标题还有给全局的导航栏背景颜色配置颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
重复以上操作创建出,news和member2个页面
在这里插入图片描述
至此4个导航页面就创建好了,然后就开始配置底部tabber

在这里插入图片描述在pages.json页面中进行配置导航栏的tabber,在和“globalStyle”的同级中创建tabBar

在这里插入图片描述
在这里插入图片描述

3.完整代码

{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "黑马商城"}}, {"path": "pages/cart/cart","style": {"navigationBarTitleText": "购物车","enablePullDownRefresh": false}}, {"path": "pages/news/news","style": {"navigationBarTitleText": "资讯","enablePullDownRefresh": false}}, {"path": "pages/member/member","style": {"navigationBarTitleText": "会员中心","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "黑马商城","navigationBarBackgroundColor": "#b50e03","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"selectedColor": "#b50e03","color": "#ccc","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "static/tabs/home.png","selectedIconPath": "static/tabs/home-active.png"},{"text": "资讯","pagePath": "pages/news/news","iconPath": "static/tabs/news.png","selectedIconPath": "static/tabs/news-active.png"},{"text": "购物车","pagePath": "pages/cart/cart","iconPath": "static/tabs/cart.png","selectedIconPath": "static/tabs/cart-active.png"},{"text": "会员","pagePath": "pages/member/member","iconPath": "static/tabs/member.png","selectedIconPath": "static/tabs/member-active.png"}]}
}

相关文章:

uniapp项目实战系列(3):底部导航栏与头部导航栏的配置

目录 系列往期文章(点击跳转)uniapp项目实战系列(1):导入数据库,启动后端服务,开启代码托管(点击跳转)uniapp项目实战系列(2):新建项目,项目搭建,微信开发工具…...

Jwt工具类

导入依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency> <dependency><groupId>javax.xml.bind</groupId><artifactId>jax…...

计算机网络-笔记-第五章-运输层

&#x1f338;章节汇总 一、第一章——计算机网络概述 二、第二章——物理层 三、第三章——数据链路层 四、第四章——网络层 五、第五章——运输层 六、第六章——应用层 目录 五、第五章——运输层 1、运输层概述 2、运输层端口号、复用、分用 &#xff08;1&#xff0…...

java-参数传递机制

java参数传递机制都是值传递。 基本类型参数传输都是数据值。 传递到方法中的值是拷贝后的值。 引用类型参数传输的都是地址值。 如果是数组的参数传递&#xff0c;那么是引用传递&#xff08;本质上还是值传递&#xff0c;但是由于数组的值传递是传递数组的内存地址&#xf…...

Python编程练习与解答 练习96:字符串是否表示整数

本练习将编写一个名为isInteger的函数&#xff0c;用于确定字符串中的字符是否代表有效整数&#xff0c;确定字符串是否表示整数时&#xff0c;则应忽略开通要或者结尾的任何空白。一旦这个空白被忽略&#xff0c;如果字符串的长度至少是1&#xff0c;且只包含数字&#xff0c;…...

Scala的特质trait与java的interface接口的区别,以及Scala特质的自身类型和依赖注入

1. Scala的特质trait与java接口的区别 Scala中的特质&#xff08;trait&#xff09;和Java中的接口&#xff08;interface&#xff09;在概念和使用上有一些区别&#xff1a; 默认实现&#xff1a;在Java中&#xff0c;接口只能定义方法的签名&#xff0c;而没有默认实现。而在…...

检查js中的字符串是否可以成为回文

探索 JavaScript 中的字符串操作领域揭示了一个令人着迷的挑战&#xff1a;确定给定的字符串是否可以转换为回文。回文&#xff0c;即正反读相同的单词或短语&#xff0c;具有固有的吸引力&#xff0c;并激发了寻求揭开其神秘属性的开发人员的好奇心。在本文中&#xff0c;我们…...

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测(风电功率预测)

时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09; 目录 时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测&#xff08;风电功率预测&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1…...

WebSocket--技术文档--基本概念--《快速了解WebSocket协议》

阿丹&#xff1a; 不断学习新技术&#xff0c;丰富自己了解更多才能扩展更多世界可能。 官网 WebSocket首页、文档和下载 - HTML5开发相关 - OSCHINA - 中文开源技术交流社区 软件简介 WebSocket 是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebS…...

flutter报错-cmdline-tools component is missing

安装完androidsdk和android studio后&#xff0c;打开控制台&#xff0c;出现错误 解决办法 找到自己安装android sdk的位置&#xff0c;然后安装上&#xff0c;并将下面的勾选上 再次运行 flutter doctor 不报错&#xff0c;出现以下画面 Doctor summary (to see all det…...

torch.bmm功能解读

bmm 是 batched matrix multiple 的简写&#xff0c;即批量矩阵乘法&#xff0c;矩阵是二维的&#xff0c;加上batch一个维度&#xff0c;因此该函数的输入必须是两个三维的 tensor&#xff0c;三个维度代表的含义分别是&#xff1a;&#xff08;批量&#xff0c;行&#xff0c…...

如何使用Puppeteer进行金融数据抓取和预测

导语 Puppeteer是一个基于Node.js的库&#xff0c;可以用来控制Chrome或Chromium浏览器&#xff0c;实现网页操作、截图、PDF生成等功能。本文将介绍如何使用Puppeteer进行金融数据抓取和预测&#xff0c;以及如何使用亿牛云爬虫代理提高爬虫效果。 概述 金融数据抓取是指从…...

Linux下 Socket服务器和客户端文件互传

目录 1.项目描述 2.函数准备 2.1 gets函数 2.2 popen函数、fread函数 2.3 access 函数 2.4 exit 函数 2.5 strtok 函数 2.6 chdir函数 3.项目代码 3.1服务器代码 3.2客户端代码 4.问题总结 1.项目描述 基于Soket聊天服务器&#xff0c;实现服务器和客户端的文件传输。…...

Nginx详解 第五部分:Ngnix反向代理(负载均衡 动静分离 缓存 透传 )

Part 5 一、正向代理与反向代理1.1 正向代理简介1.2 反向代理简介 二、配置反向代理2.1 反向代理配置参数2.1.1 proxy_pass2.1.2 其余参数 2.2 配置实例:反向代理单台web服务器2.3 代理转发 三、反向代理实现动静分离四、缓存功能五、反向代理客户端的IP透传5.1 原理概述5.2 一…...

中国行政区域带坐标经纬度sql文件及地点获取经纬度方法

文章目录 前言一、如何获取某地的经纬度&#xff1f;1.1 搜索百度地图1.2 在下方找到地图开放平台1.3 下滑找到坐标拾取器1.4 使用 二、sql文件2.1 创建表2.2 插入数据 前言 当工作业务上需要涉及地图&#xff0c;给前端返回经纬度等场景&#xff0c;需要掌握区域经纬度的获取…...

[国产MCU]-W801开发实例-WiFi网络扫描

WiFi网络扫描 文章目录 WiFi网络扫描1、WiFi模块介绍2、WiFi扫描API介绍3、WiFi扫描实例本文将演示如何使用WiFi模块进行WiFi网络扫描。 1、WiFi模块介绍 W801的WiFi具有如下特性: 支持 GB15629.11-2006 IEEE802.11 b/g/n支持 Wi-Fi WMM/WMM-PS/WPA/WPA2/WPS支持 EDCA信道接入…...

SpringBoot使用kafka事务-消费者方

前言 在上一篇文章中&#xff0c;写到了如何在springboot中生产者如何使用kafka的事务&#xff0c;详情链接&#xff1a;Springboot使用kafka事务-生产者方 那么&#xff0c;这一篇就接着上篇所写的内容&#xff0c;讲解一下再springboot中消费者如何使用kafka的事务。 实现…...

C# 实现PictureBox从指定的文件夹内进行翻页操作

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System...

Eureka 注册中心的使用

环境 springboot springcloud Eureka-Server注册中心服务端 pom.xml导入依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-server</artifactId><version>2.2.7.RELEAS…...

vue3 组件通信方式

文章目录 组件通信方式props自定义事件全局事件总线v-modeluseAttrsref与$parentprovide与injectpiniaslot 组件通信方式 props ​ 实现父子组件通信,在vue3中可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用&#xff01; 父组…...

头歌平台实战:C语言文件操作中的数字提取与格式化存储

1. 头歌平台C语言文件操作实战入门 第一次接触头歌平台的C语言文件操作任务时&#xff0c;我完全被那些fopen、fscanf函数弄晕了。直到真正动手完成"数字提取与格式化存储"这个项目&#xff0c;才发现原来文件操作可以这么有趣又实用。这个项目特别适合刚学完C语言基…...

Realistic Vision V5.1虚拟摄影棚教程:负向提示词组合策略与失效排查

Realistic Vision V5.1虚拟摄影棚教程&#xff1a;负向提示词组合策略与失效排查 你是不是也遇到过这样的情况&#xff1a;用Realistic Vision V5.1生成的人像&#xff0c;明明提示词写得很好&#xff0c;但出来的照片总有些不对劲——手指扭曲得像外星人&#xff0c;脸部细节…...

音乐播放器界面定制指南:foobar2000美化方案与体验提升

音乐播放器界面定制指南&#xff1a;foobar2000美化方案与体验提升 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 在数字音乐时代&#xff0c;播放器已不仅是播放工具&#xff0c;更是个人音乐品味的…...

APK Studio安全最佳实践:合规使用逆向工程工具

APK Studio安全最佳实践&#xff1a;合规使用逆向工程工具 【免费下载链接】apkstudio Open-source, cross platform Qt based IDE for reverse-engineering Android application packages. 项目地址: https://gitcode.com/gh_mirrors/ap/apkstudio 在移动应用开发与安全…...

Artichoke 快速入门:5分钟学会安装和使用这个革命性 Ruby 实现

Artichoke 快速入门&#xff1a;5分钟学会安装和使用这个革命性 Ruby 实现 【免费下载链接】artichoke &#x1f48e; Artichoke is a Ruby made with Rust 项目地址: https://gitcode.com/gh_mirrors/ar/artichoke Artichoke 是一个用 Rust 和 Ruby 编写的革命性 Ruby …...

SenseVoiceSmall实战案例:如何用AI分析会议录音中的情绪变化

SenseVoiceSmall实战案例&#xff1a;如何用AI分析会议录音中的情绪变化 1. 会议录音分析的痛点与解决方案 在日常工作中&#xff0c;会议录音分析一直是个耗时费力的任务。传统方法需要人工反复听取录音&#xff0c;不仅效率低下&#xff0c;还容易遗漏关键信息。特别是会议…...

ComfyUI-VideoHelperSuite:AI视频工作流的全栈解决方案

ComfyUI-VideoHelperSuite&#xff1a;AI视频工作流的全栈解决方案 【免费下载链接】ComfyUI-VideoHelperSuite Nodes related to video workflows 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-VideoHelperSuite 1. 核心价值解析&#xff1a;图像序列到视频的…...

拓扑排序不止于理论:用邻接矩阵实现时,我踩过的3个坑和性能优化

拓扑排序实战&#xff1a;邻接矩阵实现中的性能陷阱与优化策略 邻接矩阵作为图论中最直观的存储结构&#xff0c;常被初学者用来实现拓扑排序算法。但当我们真正将其投入实际项目时&#xff0c;往往会遭遇意想不到的性能瓶颈和逻辑陷阱。本文将分享三个真实项目中踩过的坑&…...

别再用鼠标点来点去了!用JavaScript原生DOM操作实现按钮高亮切换(附完整代码)

别再用鼠标点来点去了&#xff01;用JavaScript原生DOM操作实现按钮高亮切换&#xff08;附完整代码&#xff09; 在Web开发中&#xff0c;交互式按钮状态管理是最基础却最常被忽视的技能之一。很多开发者习惯依赖jQuery或前端框架提供的便捷方法&#xff0c;却对原生JavaScrip…...

国产AI 调用量反超美国,22个免费大模型API集结,DMXAPI 成开发者首选

据 OpenRouter 最新数据&#xff0c;2026 年 3 月中国 AI 大模型周调用量达 4.69 万亿 Token&#xff0c;连续两周超越美国&#xff0c;全球调用量前三席位被小米 MiMo-V2-Pro、阶跃星辰 Step 3.5 Flash、MiniMax M2.5 包揽&#xff0c;国产模型凭性能与性价比获全球开发者认可…...