remax简单tabBar与app.config.ts

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'
  }  //

下面则跟原生相同

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值