微信小程序开发的底部导航-小程序开发

首页 2024-07-09 07:58:10

开发微信小程序

简介：

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

文件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中的颜色设置相同，颜色设置为16进制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激活的图标。

以上是微信小程序开发底部导航的详细内容，请关注其他相关文章！

阅读全文

上一篇：强化安全，思科果断关闭3389端口！
下一篇：高效搭建FTP服务器，稳定传输，轻松管理！

微信小程序开发的底部导航-小程序开发

首页 2024-07-09 07:58:10

最新文章

相关文章