The body of the

The flexible layout of a custom tabbar bar can be implemented in XD. The flexible layout of a custom tabbar bar can be implemented in XD

fixedtabbarhighly

As shown in the following two pictures:

  • iphone 6/7/8

  • iphone xs max

As you can see from the figure, the custom Tabbar bar is fixed at 50 px when the screen size changes with the model, which is obviously not in line with our flexible layout requirements

The solution

Page composition

First let’s analyze the composition of the page, as shown in the figure below

Navigation, Page and tabbar. Since we didn’t use a custom navigation bar, we only had to deal with the elastic layout of the page and tabbar themselves and the matching between them

Since the parent element of the Page and tabbar is the viewport, we chose to use VH (relative viewport height) for the flexible layout of the Page and tabbar

Note that there is a small detail here:

  • Do not use customnavigationColumn, viewport = entire screen –navigation 栏
  • Using customnavigationBar, viewport = entire screen

Height setting

Since I don’t have any industrial development experience, I don’t know how a designer would set the ratio of page to tabbar, so I took it for granted to use 9:1. If this is not appropriate, I would appreciate your comments 🙂

Set up thepage

Since every page refers to page, I recommend setting page globally in your project’s app.wxss

/* app.wxss */
page {
  height: 90vh;
  background-color: #9DE7FF;
}
Copy the code
Set up thetabbar

Because we use a customized tabbar derived from repackaging Vant retry, we first looked at the Vant retry documentation related to style override

Vant Syndrome provides three ways to modify component styles:

  • Unstyle isolation
  • Use external style classes
  • useCSSvariable

For the above three ways, I think, should first consider the use of external style class, if we can’t solve the problem, using the lift style isolation (because personally I like this way, not too strong feeling a bit of a invasive), and use CSS variables as a tool for theme customization, on a single component feels a bit of overkill

The sample

Here I offer an idea for implementing an elastic Tabbar bar using an external style class

We first looked at the documentation for the Tabbar component, but found that the component did not open external style classes. Should we use unstyle isolation to begin with?

In my tests, however, I found that many components have an external style class open: the custom-class root node style class. The Tabbar component is also actually open, which can be used with VH to implement elastic custom tabbar outer box

As shown in the figure above, the height of the tabbar’s outer frame is flexible

But the flexible layout of the tabbar’s outer box is not enough. The text and ICONS inside the Tabbar are still fixed in size

  • The text

    Like tabbar, the custom-class root style class is actually open, and the font-size attribute is inherited and set on the root node. If the inner element is not specified, the text size will inherit from the parent element

  • icon

    Because Tabbar-item provides slot openings for ICONS, we can directly use the Icon component of Vant Regenerative P to replace it, and then use its size interface to achieve elastic icon size

The following is an elastic Tabbar bar based on the custom tabbar implementation from previous articles

  • index.wxml

    <van-tabbar
  custom-class="tabbar"
  active="{{ active }}"
  bind:change="onChange"
>
  <block wx:for="{{ list }}" wx:key="text">
    <van-tabbar-item
      custom-class="tabbar-item"
    >
      <! -- Add icon to json -->
      <! -- Icon slots and icon-active slots are used -->
      <van-icon
        slot="icon"
        name="{{ item.icon }}"
        size="36rpx"
      />
      <van-icon
        slot="icon-active"
        name="{{ item.icon }}"
        size="36rpx"
      />
      {{ item.text }}
    </van-tabbar-item>
  </block>
</van-tabbar>
Copy the code

  • index.wxss

    .tabbar {
  height: 10vh ! important;
  font-size: 100px ! important;
}

.tabbar-item {
  /* Use RPX */ temporarily because REM is not working properly for some reason
  font-size: 28rpx ! important;
}
Copy the code

Here is the tabbar bar with an elastic layout:

  • iphone 6/7/8

  • iphone xs max

trailer

Elastic layout of specific components

In the next installment, we’ll focus on the practice of flexible layout for specific components after implementing the overall layout of pages 🙂