微信小程序开发笔记(三)--底部导航栏，顶部标题栏设置

2023-10-24 23:23:34

基础库 2.5.0 开始支持自定义 tabBar...

1.准备三个页面，首页（home），消息（info），我的（mine）

选择pages文件夹右键-->新建文件夹 -->新建 home 文件夹-->再选中 home 文件夹右键-->新建 Page，保持和文件夹名相同，同理建消息（info），我的（mine）。

app.json里自动帮我们注册了

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/home/home",
    "pages/info/info",
    "pages/mine/mine"
  ],

我们可以把我们想要先展示的页面放到前面

"pages": [
    "pages/home/home",
    "pages/info/info",
    "pages/mine/mine",
    "pages/index/index",
    "pages/logs/logs"   
  ],

2.准备6张图片，三张选中时的图片，三张未选中时的图片，建立一个images文件夹，和pages文件夹同级，

在app.json里面添加代码段：

"tabBar": {
    "color": "#A1ABB2",
    "selectedColor": "#1DB1CF",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/homeon.png",
        "iconPath": "images/homeoff.png",
        "pagePath": "pages/home/home",
        "text": "主页"
      },
      {
        "selectedIconPath": "images/infoon.png",
        "iconPath": "images/infooff.png",
        "pagePath": "pages/info/info",
        "text": "信息"
      },
      {
        "selectedIconPath": "images/mineon.png",
        "iconPath": "images/mineoff.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }

解释一下

"color": "#A1ABB2",   //导航栏字体的颜色 
"selectedColor": "#1DB1CF",　　//导航栏选中时字体的颜色
"borderStyle": "black",　//导航栏上边框颜色,字段需为 black 或 white　

"selectedIconPath": "images/homeon.png",　　//导航栏选中时展示的图片
"iconPath": "images/homeoff.png",　　//导航栏未选择时展示的图片
"pagePath": "pages/home/home",   //导航栏对应的页面地址 
"text": "主页"　　//导航栏对应的文字

基础库 2.5.0 开始支持，低版本需做兼容处理。如果觉得官方的很丑，或者需求原因，当然可以自定义啦，比如用：swipe,swp-item实现...

推荐看到的一个网友文章：https://www.cnblogs.com/ljybill/articles/10419706.html

官方传送门

3.公共顶部标题区域

在app.json里面添加代码段：

"window": { 
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light",
    "backgroundColor": "#eee"
  },

解释一下

"navigationBarBackgroundColor": "#fff",　　//顶部标题区域背景色
"navigationBarTitleText": "微信小程序",　　//全局顶部标题文字
"navigationBarTextStyle": "black",　　//顶部标题文字颜色
"enablePullDownRefresh": true,　　//是否开启下拉刷新，字段需为 true 或 false
"backgroundTextStyle": "light",　　//下拉刷新三个点点的颜色，字段为 dark 或 light
"backgroundColor": "#eee"　　//下拉刷新显示的区域背景颜色

官方传送门

设置单个页面，就在单个页面文件夹下的json文件夹中配置，如home.json：

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "主页",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#eee"
}

再推荐一个网友的上拉加载更多：https://www.jianshu.com/p/cc3a516224ee

简单记录一下。。。不足之处，欢迎指出。谢谢！

微信小程序开发笔记(三)--底部导航栏，顶部标题栏设置

码农公寓

1.准备三个页面，首页（home），消息（info），我的（mine）

2.准备6张图片，三张选中时的图片，三张未选中时的图片，建立一个images文件夹，和pages文件夹同级，

3.公共顶部标题区域

相关文章