美文网首页
小程序底部导航栏

小程序底部导航栏

作者: 爱上小程序 | 来源:发表于2018-11-19 22:23 被阅读0次

    创建微信小程序的底部导航栏,需要用到“tabBar”
    tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
    tabBar定义在app.josn里

    1)新建两个页面(新建页面方法)user 和 classify
    确定你的两个页面在app.josn中已注册
    2)在app.josn中定义tabBar
    每多加一个tab就要多写一段,并用大括号扩起来

    "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index", //跳转路径
            "text": "首页",                  //tab显示文本
            "iconPath": "image/index.png",  //tab图标
            "selectedIconPath": "image/index1.png" //选中时tab的图标
          },
          {
            "pagePath": "pages/public/public",
            "text": "分类",
            "iconPath": "image/classify-d.png",
            "selectedIconPath": "image/classify-d.png"
          },
          {
            "pagePath": "pages/user/user",
            "text": "我的",
            "iconPath": "image/user.png",
            "selectedIconPath": "image/user-d.png"
          }
        ]
      }
    

    tabBar的一些常用属性,可以根据这些属性设计出你想要的导航栏样式

    属性 类型 必填 默认值 描述
    color HexColor tab 上的文字默认颜色
    selectedColor HexColor tab 上的文字选中时的颜色
    backgroundColor HexColor tab 的背景色
    borderStyle String black tabbar上边框的颜色, 仅支持 black/white
    list Array tab 的列表,详见 list 属性说明,最少2个、最多5个
    backgroundColor String bottom 可选值 bottom、top

    相关文章

      网友评论

          本文标题:小程序底部导航栏

          本文链接:https://www.haomeiwen.com/subject/hxlzfqtx.html