小程序2(导航栏,底栏的相关设置)

news/2024/7/20 2:05:46 标签: 小程序

app.json
必须有一个对象,用{}表示一个对象
不要粘贴这些代码,粘贴上去会报错,因为json文件不支持注释

{
//pages所有的页面都要在此处说明路径
"pages":[
"pages/home/home",
"pages/about/about"
],
//设置全局窗口的颜色、背景之类
"window":{
//导航栏背景颜色  颜色必须用十六进制表示
 "navigationBarBackgroundColor": "#ff5777" ,
//导航栏的文本颜色 如上面的三点标志,电量标志之类 只支持白色和黑色
 "navigationBarTextStyle":"black"
//导航栏为小程序加标题
"navigationBarTitleText":"Hello"
//ios系统时,下拉整个页面露出的背景色
"backgroundColor": "#000000",
//安卓系统,设置界面可以下拉,一般不进行全局设置,而是对于某个页面单独设置
 "enablePullDownRefresh": true//下拉界面时,显示的加载图标的样式,只有light和dark值可选
 "backgroundTextStyle": "light"
 },


 //底部tabBar的相关设置 alt+shift+f可以对代码进行格式化,使代码结构清晰
 //list可以看作一个数组,最少需要两个项目,每个项目可以看作是一个超链接
 "tabBar": {
 //修改图标下显示的文字颜色 与list是同级的
 	 "selectedColor": "#000000",
    "list": [
    //item1
      {
      //点击图标后,需要跳转的页面路径
      "pagePath": "pages/home/home",
      //图标下方显示的文字
      "text": "主菜单",
      //图标路径,需要自己找图片 图片大小不能超过40kb 81*81px
      "iconPath": "assets/tabbar/home.png",
       //选中图标后图标进行改变的图片
      "selectedIconPath": "assets/tabbar/home_act.png"
    },
    //item2
    {
      "pagePath": "pages/about/about",
      "text": "选择",
      "iconPath": "assets/tabbar/select.png",
      "selectedIconPath": "assets/tabbar/select__act.png"
    }  
    ]
  }
  
 }

上述操作完成后,效果如下:
在这里插入图片描述
page.json
可以独立设置导航栏的标题,颜色之类
页面配置优先级大于全局配置,和局部变量与全局变量的性质一样

{
  "usingComponents": {},
  //对于导航栏的设置不用使用app.json中的window关键字
  "navigationBarTitleText":"分类",
  "navigationBarBackgroundColor":"#ff0000"
  
}

page.json完成后,跳转页面显示如下:
在这里插入图片描述


http://www.niftyadmin.cn/n/1756443.html

相关文章

Docker安装(Linux版)

Docker开源的应用容器引擎,可以为任何应用创建一个轻量级的、可移植的、自给自足的容器。 有一个好的比喻:云计算是大货轮,Docker是集装箱 一、Xshell与虚拟机centos建立会话连接 1.打开虚拟机centos ifconfig查看虚拟机的IP地址 2.打开Xshell新建会话…

小程序3(注册App)

生命周期函数的基础介绍 app.js里会存放一个App对象,里面绑定了一些生命周期函数,称为注册小程序 app.js里的内容 App({/*** 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)*/onLaunch: function () {console…

小程序4(注册page)

小程序有很多页面文件 每个页面文件有一个js文件,在js文件里调用Page方法称为注册页面 一般情况,每个页面都需要调用Page注册页面 注册了Page后我们可以在Page里干什么 1、在生命周期函数里发送网络请求,从服务器获取数据,比如在…

Vim常用命令演示

文章目录Vim命令1. 打开文件2.模式转换2.1 命令模式->编辑模式(常用)2.2 输入模式->命令模式2.3 命令模式->末行模式2.4 末行模式->命令模式3.关闭文件3.1 命令模式下关闭3.2 末行模式下关闭4.光标跳转(命令模式下)4.…

IP地址、网关、域名的简装理解

文章目录IPv4分类(点分十进制表示)子网掩码(NETMASK)网关(GATEWAY)域名解析(DNS)常用命令宏观上,全球13台根服务器,从A到M命名IPv4时代(32位IP地址)&#xff…

配置静态IP、虚拟网卡的简装理解

文章目录虚拟机静态IP主机配置静态IP虚拟网卡三种模式的区别主机内有多个网卡虚拟机有三个虚拟网卡:VMnet0(桥接模式),VMnet1(仅主机模式),VMnet8(NAT模式)eg.当Centos7虚拟机选择NAT模式时&…

Docker常用命令使用演示

文章目录docker 信息镜像操作容器操作虚拟机和容器间相互复制文件在docker容器出错时,需要重启docker使用linux命令:systemctl restart dockerdocker 信息 docker version 查看docker版本号 docker info 查看docker的信息、服务、容器的信息 docker …

mysql+tomcat+nginx搭建web项目集群

文章目录单一架构和集群架构概念部署1、下载镜像2、启动Mysql、导入数据3、启动tomcat容器(3个)、部署项目4、启动Nginx容器单一架构和集群架构概念 单一架构 单一架构缺点:    同时容纳在线人数数量有限    不容灾,一个崩…