Appeap -Vant appeAP - appeAP - Moment For Technology

The body of the

Analyze the applet documentation to provide the code

At the end of the last installment, we found that the wechat applet documentation provides code to implement TAB selection, so let’s first take a look at this sample code and share some of my own understanding

`index.wxss`Part of the

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0.0.0.0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
Copy the code

Position: fixed; Attach the entire Tabbar bar to the bottom of your phone’s applet window
Env (safe-area-inset-bottom) for the small black bar on the bottom of the iphoneX
Using the transform: scaleY (0.5); Scale the border on the tabbar bar to half its original size.
Use Flex layout to lay out the tabbar column items and the content in the subitems

Text-align: center; text-align: center; The use of the attribute is not necessary because the two children inside the box, cover-image and cover-view, are already precide-content: center; , align-items: center; And flex – direction: the column; Good control of
The selection of the cover-image and cover-view tags was originally written using nested elements

. Tab-bar-item cover-image: Selects the cover-image tag nested inside the tab-bar-item class

But it is actually found in the wechat developer tools

.

Regarding this issue, the component templates and styles of wechat applets are mentioned

Components and pages referencing components cannot use id selectors (#a), attribute selectors ([a]), and tag name selectors. Instead, use the class selector.

You can see that not only can’t you use tag name selectors alone in a component, but nesting is also not possible. Change the nested script to a separate class script

`index.wxml`Part of the

<! --miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view
    wx:for="{{list}}"
    wx:key="index"
    class="tab-bar-item"
    data-path="{{item.pagePath}}"
    data-index="{{index}}"
    bindtap="switchTab"
  >
    <cover-image
      src="{{selected === index ? item.selectedIconPath : item.iconPath}}"
    >
    </cover-image>
    <cover-view
      style="color: {{selected === index ? selectedColor : color}}"
    >
      {{item.text}}
    </cover-view>
  </cover-view>
</cover-view>
Copy the code

usewx:forLoop to render eachtabbarchildren
intabbarAt the click event of the item nodedatasetAdded custom data: pathpathAnd the item numberindex
useselectedVariables to controltabbarThe selection of item nodes is highlighted

`index.js`Part of the

Component({
  data: {
    selected: 0.color: "#7A7E83".selectedColor: "#3cc51f".list: [{
      pagePath: "/index/index".iconPath: "/image/icon_component.png".selectedIconPath: "/image/icon_component_HL.png".text: "Component"
    }, {
      pagePath: "/index/index2".iconPath: "/image/icon_API.png".selectedIconPath: "/image/icon_API_HL.png".text: "Interface"}},attached(){},methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      // setData can be deleted
      // Because this is set in the target page of the jump
      this.setData({
        selected: data.index
      })
    }
  }
})
Copy the code

Encapsulate the jump path pagePath and iconPath iconPath required by tabbar subitems into the internal data of the component

Tabbar bar jump and highlight function:

Null the component’s lifecycle functions attached
Set all tabbar jump pages to Component

Highlights the relevant action that corresponds to the tabbar child of the current page in the pageLifetimes field of the page treated as a component

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        // Set it here
        this.getTabBar().setData({
          selected: 0})}}}})Copy the code

Small program sample implementation`tabbar`Bar jump highlights the train of thought

Let’s take a closer look at the sample processing for tabbar jump highlighting:

Null the component’s lifecycle functions attached

My understanding of this step is as follows:

This component lifecycle is described in the component section of the applet documentation as follows:

The Attached life cycle is triggered after the component is fully initialized and the page node tree is entered. At this point, this.data has been initialized to the current value of the component. This lifecycle is useful, and most of the initialization work can be done at this point.

This component life cycle looks like it could be used to highlight the corresponding tabbar child of the current page, but since the tabbar bar bar is registered in app.json and the corresponding file under custom-tab-bar takes over rendering rather than being written on the corresponding page, There is no way to use the parent element to communicate to the child component, so we have to abandon the idea of highlighting this lifecycle
Set all tabbar jump pages to Component
Highlights the relevant action that corresponds to the tabbar child of the current page in the pageLifetimes field of the page treated as a component

I wasn’t too confused when I first looked at step 2, because the Component constructor section of the applet documentation specifically mentions that pages can be constructed using the Component constructor. But when I looked at show() in the pageLifetimes field in step 3, I’m really confused about what this life cycle means:

Execute when the page the component is on is displayed

The binding code means that a page treated as a component will perform actions that highlight tabbar children when the page where the component is displayed…

This raises the question, when exactly is the page being displayed for the page that is considered a component?

Here’s my first guess: Before using the Component constructor to construct a Page, wechat will use an empty Page constructor to construct an empty Page, and then use the Component constructor to construct the content of the Page. If other components are used in the content of the Page, Wechat will, in turn, invoke the corresponding Component constructor.

In our tests, however, the developer tool will report an error if we comment out the Component constructor used to construct the page:

As you can see, the Component constructor used to construct the Page will directly replace the previous Page constructor

My second guess is that if there is no empty Page created to convey the display information to the Page constructed by the Component constructor, the show field in pageLifetimes here is equivalent to the onShow field in the original Page

However, we found that the show field in pageLifetimes and the onShow field in Page can be used at the same time, and even the life cycle fields of Page and Component can be used at the same time, in a certain order between each other
```
Component({

  lifetimes: {
    attached: function() {
      // Executed when the component instance enters the page node tree
      console.log("This is attached in lifetimes"); }},pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0})}console.log("This is show in pageLifetimes"); }},methods: {
    onLoad: function () {
      console.log("This is onLoad in Page");
    },
    onShow: function () {
      console.log("This is onShow in Page"); }}})Copy the code
```

trailer

An object with a life cycle in a small program

Now that we have found that the Component life cycle and the page life cycle can be used together in the Component constructor used to construct the page, what is the order between them? At what point in the life cycle was the Tabbar component added? We’ll have to talk about that for another time 🙂

-Vant Appellate P-5 (Life Cycle in Appellate Programs – Basic)

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Appeap -Vant appeAP – appeAP

The body of the

Analyze the applet documentation to provide the code

`index.wxss`Part of the

`index.wxml`Part of the

`index.js`Part of the

Small program sample implementation`tabbar`Bar jump highlights the train of thought

trailer

An object with a life cycle in a small program

Appeap -Vant appeAP – appeAP

The body of the

Analyze the applet documentation to provide the code

index.wxssPart of the

index.wxmlPart of the

index.jsPart of the

Small program sample implementationtabbarBar jump highlights the train of thought

trailer

An object with a life cycle in a small program

Related Posts

Wechat mini program using Amap 🎃

JS several ways to empty an array

Elementui -Cascader- Radio mode to expand the drop-down directly to see the checked data

`index.wxss`Part of the

`index.wxml`Part of the

`index.js`Part of the

Small program sample implementation`tabbar`Bar jump highlights the train of thought