微信小程序开发底部导航

2022年03月21日 10:41:32阅读数:508博客 / **

简介:

一套软件的应用架构包括数据层、业务逻辑层、服务层、控制层、展示层、用户等多个层次。

主配置文件app.json:

主配置文件app.json位于项目主目录中,用来对当前项目进行全局配置。

代码示例如下:

{

  "pages": [

    "pages/index/index",

    "pages/new/new",

  ],

  "window": {

    "backgroundColor": "#F6F6F6",

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#F6F6F6",

    "navigationBarTitleText": "我的第一个小程序",

    "navigationBarTextStyle": "black"

  }

}

上面代码中有两个页面,这是一个json对象,其中的属性pages用来定义小程序的页面,上面代码中表示有两个页面,一个名为”index”,位于“pages/index”下,另一个名为new,位于“page/new”下。

位于pages数组中的第一项表示小程序的初始页面,即启动小程序时将运行显示的页面。如果继续添加页面可以往pages数组中添加即可。

配置状态:

backgroundColor:用来设置窗口的背景色,与HTML中的颜色设置相同,使用十六进制的rgb方式设置颜色。默认为白色。

backgroundTextStyle:用来设置下拉背景字体、loading图的样式,有“dark”、“light”这两个值。

enablePullDownRefresh:用来设置是否开启下拉刷新,默认false。

navigationBarBackgroundColor:用来设置导航栏背景颜色。

navigationBarTextStyle:设置导航栏标题颜色。

navigationBarTitleText:设置导航栏标题的文字内容。

配置底部导航:

"tabBar": {

    "list": [

      {

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "images/icon_HOME.png",

      "selectedIconPath": "images/icon_HOMEED.png",

      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"

    }, 

    {

      "pagePath": "pages/new/new",

      "text": "广场",

      "iconPath": "images/icon_GUANGCHANG.png",

      "selectedIconPath": "images/icon_GUANGCHANGED.png",

      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"

    },

    {

      "pagePath": "pages/userConsole/userConsole",

      "text": "设置",

      "iconPath": "images/icon_SET.png",

      "selectedIconPath": "images/icon_SETED.png",

      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"

    }]

  }

 

tabBar为底部导航,上面的代码中有三个底部导航

Color:设置tab未激活状态的文字颜色。

selectedColor:设置tab激活状态的文字颜色。

borderStyle:设置底部导航边框。

backgroundColor:设置底部导航背景颜色。

list:这是一个数,设置底部导航个数,最少2个,最多5个。

text:设置导航文字。

pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标

QQ截图20220321103125.png

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    **
    博文
    1
    粉丝
    0
    评论
    0
    访问量
    508
    积分:0
    P豆:8
    最新更新
    微信小程序开发底部导航2022-03-21
    博文分类