Taro:制作tabBar

Taro:制作tabBar

    • 一、效果实现代码
    • 二、目录结构
    • 三、效果展示

一、效果实现代码

//app.jsx
//pages中将需要跳转的页面添加进来
    pages: [
      'pages/index/index',
      'pages/toggle/toggle'
    ],
    
//添加跳转选项
    tabBar:{
      //字体颜色
      color:"#2c2c2c",
      // 选择后字体颜色
      selectedColor: "#1296db",
      //背景颜色
      backgroundColor:"#FFF",
      // 边框颜色
      borderStyle: 'black',
      list:[
        {
          pagePath:"pages/index/index",
          text:"首页",
          iconPath:"images/index.png",
          selectedIconPath:"images/index-select.png"
        },
        {
          pagePath:"pages/toggle/toggle",
          text:"测试",
          iconPath:"images/my.png",
          selectedIconPath:"images/my-select.png"
        }
      ]
    }

二、目录结构

Taro:制作tabBar_第1张图片

三、效果展示

Taro:制作tabBar_第2张图片

你可能感兴趣的:(Taro,Taro,tabBar)