微信小程序-底部/顶部导航栏

先从顶部导航栏开始吧

第一步:在app.json中添加路径目录,目前有两个目录

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
   ]
}

第二步:还是在app.json中定义window属性

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3B3B3B",
    "navigationBarTitleText": "顶部导航栏",
    "navigationBarTextStyle": "white"
  }

其中,常用的window属性包括

属性描述
navigationBarBackgroundColor导航栏背景颜色
navigationBarTextStyle

导航栏标题颜色

仅支持black/white

navigationBarTitleText导航栏文字内容
backgroundTextStyle

下拉loading的样式

仅支持dark/light

其他属性操作见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

效果如下:

 

下面说一下底部导航栏的设置

达到上面的效果,只需要在在app.json中设置tabBar属性,常用的属性说一下吧

color导航栏文字的颜色
selectedColor导航栏文字选中时候的颜色
backgroundColor导航栏背景色
borderStyle

导航栏边框颜色

仅支持black/white

list导航栏的列表,至少两个
position

导航栏的位置

仅支持top/bottom

"tabBar": {
      "color": "black",
      "selectedColor": "#009aff",
      "backgroundColor": "#0000",
      "borderStyle": "black",
      "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "/images/home.png",
            "selectedIconPath": "/images/homeselect.png"
        },
        {
            "pagePath": "pages/discount/discount",
            "text": "活动",
            "iconPath": "/images/discount.png",
            "selectedIconPath": "/images/discountselect.png"     
        },
        {
          "pagePath": "pages/teamList/teamList",
          "text": "设置",
          "iconPath": "/images/teamList.png",
          "selectedIconPath": "/images/teamListselect.png"
        },
        {
            "pagePath": "pages/user/user",
            "text": "我的",
            "iconPath": "/images/user.png",
            "selectedIconPath": "/images/userselect.png"        
        }
       ]
  }

其中list每一项都是一个对象,属性说明入下:

属性说明
pagePath页面路径,必须在 pages 中先定义
texttab 上按钮文字
iconPath图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 postion 为 top 时,不显示 icon。
selectedIconPath选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 postion 为 top 时,不显示 icon。

当然啦,不要忘记在app.json的page属性中定义这四个路径目录

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/teamList/teamList",
    "pages/discount/discount",
    "pages/user/user",
  ],

 

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值