当前位置: 首页 > 工具软件 > Remax > 使用案例 >

remax简单tabBar与app.config.ts

张建树
2023-12-01

remax简单tabBar与app.config.ts

在原生小程序中我们一般都是这样配置tabbar,如下:

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

详情请看微信开发者文档,坐标:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
而在remax中我们配置rabbar的话是在app.config.ts中配置,与原生开发略微不同的是,在这里面,我们以const import export这三者结合着使用的,
以微信小程序为例

const pages = [
  'pages/index/index',  //入口页
  'pages/my/index'   //用户页
]; //页面配置

//全局颜色配置
const color = '#282c34';

import { AppConfig as WechatAppConfig } from 'remax/wechat';

export const wechat: WechatAppConfig = {
  pages,
  window: {
    navigationBarBackgroundColor: color,
    // navigationBarTitleText: '七弦',
    navigationBarTitleText:'七弦'

  },
   tabBar:{
    color:'#333333',
    selectedColor:'#333333',
    backgroundColor:'#ffffff',
    borderStyle:'white',
    list:[
    {
        pagePath:'pages/index/index',
        text:'银八三三',
        iconPath:'home.png',
        selectedIconPath:'home_select.png'
      },
      {
        pagePath:'pages/my/index',
        text:'新八几',
        iconPath:'home.png',
        selectedIconPath:'home_select.png'
      }
    ],
    position:'bottom'
  }  //

下面则跟原生相同

 类似资料: