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"}]}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

33、Flink之hive介绍与简单示例

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

微信小程序使用本地存储方法wx.setStorageSync()和wx.getStorageSync()

微信小程序的本地存储可以使用wx.setStorageSync()和wx.getStorageSync()方法实现 使用wx.setStorageSync()方法可以将数据以键值对的方式存储到本地存储中: wx.setStorageSync(demo, demo123);获取数据:使用wx.getStorageSync()方法可以从本地存储中获…

「MySQL-05」MySQL Workbench的下载和使用

目录 一、MySQL workbench的下载和安装 1. MySQL workbench介绍 2. 到MySQL官网下载mysql workbench 3. 安装workbench 二、创建能远程登录的用户并授权 1. 创建用户oj_client 2. 创建oj数据库 3. 给用户授权 4. 在Linux上登录用户oj_client检查其是否能操作oj数据库 三、使用…

OpenCV(六):多通道分离与合并

目录 1.多通道分离split() 2.多通道合并merge() 3.Android JNI demo 1.多通道分离split() void cv::split ( InputArray m, OutputArrayOfArrays mv ) m:待分离的多通道图像。 mv:分离后的单通道图像,为向量vector形式。 2.多通道合并merge…

C++ 友元

朋友可访问自己的东西,大概就这么个意思。即某类的友元类可访问该类的所有变量以及函数,或友元函数可以访问该类的变量以及函数,在朋友眼中没有任何隐藏,可谓时赤裸相对,肝胆相照,生生挚友。 注意&#xf…

聊聊检索增强,LangChain一把梭能行吗?

背景 ChatGPT诞生之初,大家仿佛从中看到了未来:可以拿着大语言模型(LLM)这把锤子,锤遍业务上的钉子。其中最被看好的场景,莫过于搜索,不仅是微软、谷歌、百度这样的大公司将LLM用到自己的搜索业…

ROS2学习(一):Ubuntu 22.04 安装 ROS2(Iron Irwini)

文章目录 一、ROS2(Iron Irwini)介绍二、ROS2(Iron Irwini)安装1.设置编码2.使能代码库3.安装ROS2 Iron 三、ROS2测试四、ROS2卸载 一、ROS2(Iron Irwini)介绍 官方文档 Iron Irwini版本支持的平台如下: 二、ROS2(Iron Irwini)安装 1.设置编码 sudo apt update…

利用python爬取谷歌趋势某个关键词的每日搜索次数

大家好,我是带我去滑雪!本期尝试利用python爬取谷歌趋势某个关键词的每日搜索次数。 目录 1、什么是谷歌趋势? 2、爬取谷歌趋势的搜索次数有何用? 3、代码如何实现? (1)导入相关模块 (2&a…

Java实现根据关键词搜索京东商品列表数据方法,当当API接口(jd.item_search)申请指南

要通过京东网的API获取商品列表数据,您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例,展示如何通过京东开放平台API获取商品列表: 首先,确保您已注册成为当当开放平台的开发者,并创建…

Windows安装单节点Zookeeper

刚学习Dubbo,在Centos7中docker安装的zookeeper3.7.1。然后在启动provider时一直报错,用尽办法也没有解决。然后zookeeper相关的知识虽然以前学习过,但是已经忘记的差不多了。现在学习dubbo只能先降低版本使用了,之后再复习zookee…

spring cloud新版本使用loadbalancer替代Ribbon

Nacos 2021 不再集成 Ribbon&#xff0c;建议使用spring cloud loadbalancer 引入 一、简单使用 引入依赖spring cloud loadbalancer <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-loadbalancer<…

数据库锁简析

数据库大并发操作要考虑死锁和锁的性能问题。用T1代表一个数据库执行请求&#xff0c;T2代表另一个请求&#xff0c;也可以理解为T1为一个线程&#xff0c;T2 为另一个线程。T3,T4以此类推。下面以SQL Server为例。 锁的种类 共享锁(Shared lock) 例1&#xff1a;T1: select…

Golang数据结构和算法

Golang数据结构和算法 数据的逻辑结构和物理结构常见数据结构及其特点算法的时间复杂度和空间复杂度Golang冒泡排序Golang选择排序Golang插入排序Golang快速排序Golang归并排序Golang二分查找Golang sort包Golang链表Golang container/list标准库Golang栈stackGolang二叉搜索树…

解决css样式中last-child不生效的问题

需求 项目中需要使用v-for指令来渲染一个图片列表&#xff0c; 现状 发现&#xff0c;最后一个格子并没有跟下面绿色线对齐。 最后发现 是因为 每个格子都给了 margin-right&#xff1a;36px&#xff0c;影响到了最后一个格子 所以使用last-child 将最后一个格子的margin 属性…

ARM DIY(六)音频调试

前言 今天&#xff0c;调试一下音频 硬件焊接 硬件部分核心是 LM4871 音频功放芯片 对于 SOC 来讲很简单&#xff0c;就一个引脚 HPOUTL&#xff08;单声道&#xff09;&#xff1b;对于扬声器来讲也很简单&#xff0c;就两个引脚&#xff0c;插上就可以了。 另外一个关键点…

FastDFS+Nginx - 本地搭建文件服务器同时实现在外远程访问「端口映射」

文章目录 前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx 2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.…

vue3中如何使用el-tooltip中的插槽达到换行效果

el-tooltip的content属性中的内容可以使用插槽来替换 话不多说&#xff0c;直接上代码 <el-tooltip effect"light" placement"top-start"><div slot"content" class"tips"> // 在这里运用插槽<p class"tip-tex…

数据结构--5.1图的存储结构(十字链表、邻接多重表、边集数组)

目录 一、十字链表&#xff08;Orthogonal List&#xff09; 二、邻接多重表 三、边集数组 四、深度优先遍历 一、十字链表&#xff08;Orthogonal List&#xff09; 重新定义顶点表结点结构&#xff1a; datafirstInfirstOut 重新定义边表结构结点&#xff1a; tailV…

js 将形如 ‘Aug 30 2022‘ 格式的日期转化为 ‘%Y-%m-%d‘ 的格式。

可以使用JavaScript中的Date对象和相关方法来完成此任务。具体实现如下&#xff1a; // 定义需要转换的日期字符串 const dateStr Aug 30 2022;// 将日期字符串转换为Date对象 const date new Date(dateStr);// 使用Date对象的getDate、getMonth、getFullYear方法获取年月日…

OS 死锁处理

如果P先申请mutex 则mutex从1置零&#xff0c;假设申请到的empty 0则empty变成-1阻塞态 同理C中mutex从0变为-1&#xff0c;那么如果想离开阻塞态&#xff0c;那么就需要执行V&#xff08;empty&#xff09;但是如果执行V&#xff08;empty&#xff09;就需要P&#xff08;mu…