uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置

server/2024/11/19 13:12:33/

前言:

本文记录的是小程序>微信小程序的全局配置、导航栏配置、tabBar配置

一、全局配置:

可以直接查官方文档:pages.json 页面路由 | uni-app官网,有非常详细的文档说明

都是在 pages.json里面做配置的,我们可以看到已经有一些配置了

 简单写了一下每句注释:

"globalStyle": {"navigationBarTextStyle": "black",//顶部导航栏文字颜色,只支持black、white"navigationBarTitleText": "uni-app",//全局配置顶部导航栏文字"navigationBarBackgroundColor": "#F8F8F8",//顶部导航栏背景色,只能写16进制,英文单词或rgb会报错"backgroundColor": "#F8F8F8",//下拉背景色"enablePullDownRefresh":true//开启下拉刷新},	

注意:

1、已经配置了"navigationBarTitleText": "uni-app"全局配置顶部导航栏文字,但是为什么我的分类页没有显示顶部导航栏的文字呢?

这是因为还有局部的配置 将导航栏文字设置成了空字符串:

2、只设置了backgroundColor之后发现不能下拉,是因为没有设置enablePullDownRefresh,enablePullDownRefresh默认值为false,设置之后效果如下:

二、局部配置

1、局部配置和全局配置的内容差不多,可以参考官方文档,差别就是要写在pages的style里面

2、需要注意的是,局部配置会覆盖全局配置

三、tabBar配置

1、部分常用配置:
"tabBar": {"selectedColor": "#ff5500", //tab 上的文字选中时的颜色"list": [{"pagePath": "pages/home/home", //页面路径"text": "主页", //tab 上按钮文字"iconPath": "static/tabBarIcon/home.png", //图片路径"selectedIconPath": "static/tabBarIcon/home_selected.png" //选中时的图片路径}, {"pagePath": "pages/categorty/categorty","text": "分类","iconPath": "static/tabBarIcon/category.png","selectedIconPath": "static/tabBarIcon/category_selected.png"}, {"pagePath": "pages/mine/mine","text": "个人","iconPath": "static/tabBarIcon/mine_line.png","selectedIconPath": "static/tabBarIcon/mine_line_selected.png"}]},
 2、展示效果:

3、官网上对每个属性都有说明:


http://www.ppmy.cn/server/143194.html

相关文章

React Native 全栈开发实战班 - 图片加载与优化

在移动应用中,图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 React Native 中常用的图片加载方法,包括 Image 组件的使用、第三方图片加载库(如 react-native-fast…

C#设计模式(12)——享元模式(Flyweight Pattern)

前言 享元模式通过共享对象来减少内存使用和提高性能。 代码 public abstract class Flyweight {public abstract void Control(); }public class ComputerFlyweight : Flyweight {private string _operator;public ComputerFlyweight(string name){_operator name;}public o…

Cesium 相机系统

Cesium 的相机系统是其 3D 地球渲染引擎的重要组成部分,它控制用户在虚拟地球上的视图和交互体验。Cesium 的相机系统具备灵活性和强大的功能,允许开发者自定义视图、导航和交互方式。以下是 Cesium 相机系统的主要特点和功能: 1. 相机的基本…

Spring Boot汽车资讯:科技与速度的新境界

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了汽车资讯网站的开发全过程。通过分析汽车资讯网站管理的不足,创建了一个计算机管理汽车资讯网站的方案。文章介绍了汽车资讯网站的系统分析部分&…

应用系统开发(12) Zync中实现数字相敏检波

在 Xilinx Zynq 系列(如 Zynq-7000 或 Zynq UltraScale+)中实现数字相敏检波(DSP,Digital Synchronous Detection)可以通过硬件(PL部分,FPGA逻辑)和软件(PS部分,ARM Cortex-A 处理器)的协同工作来实现。以下是一个详细的设计方法,包括基本原理和 Zynq 的实现步骤。…

Windows安装Elasticsearch及Spring Boot整合ES教程

目录 一、在Windows上安装Elasticsearch1. 下载Elasticsearch2. 配置Elasticsearch3. 启动Elasticsearch4. 安装Head插件(可选) 二、Spring Boot整合Elasticsearch1. 创建Spring Boot项目并添加依赖2. 配置Spring Boot连接Elasticsearch3. 创建实体类和R…

Jenkins + gitee 自动触发项目拉取部署(Webhook配置)

目录 前言 Generic Webhook Trigger 插件 下载插件 ​编辑 配置WebHook 生成tocken 总结 前言 前文简单介绍了Jenkins环境搭建,本文主要来介绍一下如何使用 WebHook 触发自动拉取构建项目; Generic Webhook Trigger 插件 实现代码推送后,触…

RK3568笔记七十:使用xml记录数据

若该文为原创文章,转载请注明原文出处。 一、前言 在开发项目过程中,有一些操作记录或事件数据需要记录在本地或服务器,记录在本地有很多方式,这里记录使用xml简单的方式处理数据。 示例: 这是我想要记录下来的格式,累计记录200条,其中,可以创建参数,修改参数,查询…