关于tabBar的自定义,渲染,切换,修改

84 阅读1分钟

image.png

image.png

复制图中的 custom-tab-bar (注:必须用此名添加文件不可更改)

image.png

在此文件新建一个组件名字必须是 index

image.png

image.png

以上设置完成后小程序会自动识别此自定义的index组件,从而渲染到该小程序页面上

设置样式覆盖要在index.js文件中设置,添加一个options属性节点配置 styleIsolation:"shared"

image.png

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "./store";
Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: "...",
  },
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    actions: {
      buttonTap: "update",
    },
  },
  methods: {
    myMethod() {
      this.data.sum; // 来自于 MobX store 的字段
    },
  },
});