“This is my fourth day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

preface

We have already realized the encapsulation and page switching function of the bottom navigation bar. Continue to improve our web version of the gold nuggets APP. The functions to be realized in this sharing are mainly as follows:

  • The icon on the left of the header component on the home page is displayed
  • Display the search box in the middle of the header component on the home page
  • The sign-in icon and status display on the right of the header component on the home page
  • Obtain, display and switch the TAB TAB below the header component of the home page

Analysis of header components

  • As you can see in the figure below, at first glance the header search section and the TAB below look like a whole, and then the content below is a separate section. But when we started writing code to introduce vant components, we found the opposite. The image on the left of the header, the search box in the middle, and the check-in status on the right are a separate entity, while the TAB TAB and its list of contents are a complete entity.

  • In addition, when we click the search box at the top to try to search, we find that it is not a real search box, but a direct jump to a new page for search operations. As shown below:

  • Looking at the TAB TAB, we can only see four tabs in our viewport: Attention, Recommendations, Top trending and Top Picks. Click the three horizontal ICONS on the right and jump to a new page, where many tabs are loaded. Click the TAB and return to the home page list and load the corresponding content. Analysis found that: except for the four labels we saw, the other labels were returned to us from the background through the interface, as shown in the figure below. In order to facilitate the realization of our actual combat will be all the labels loaded at one time, no longer the new page switch.

Next we will do an assembly of the header components.

Header search bar

After the above simple analysis, we know that the head is composed of the left icon, the middle false search box and the right check in status. In this share:

  • The campaign icon in the upper left corner will be replaced with the nuggets official logo
  • The middle false search box can be implemented with the van-search component in the Vant component library and is disabled
  • For the time being, the status of the right check-in is written to the status of check-in, and optimization will be performed later

We took a look at the official Vant component library and found that the NavBar navigation bar was suitable for our needs. It happened to be left, middle and right structure, and we could just replace the left, middle and right contents with the ones we wanted

  • Let’s first pull a van-nav-bar component
  • Define the #left, #title, and #right slot templates in the component content
  • Pull another van-image component in the #left slot to display the official logo icon. The image should be imported as import and set to the round prototype icon
  • Drag a van-search component in the #title slot, because the search box doesn’t really search, just show and jump, so just disable it
  • Drag a van-icon into the #right slot to display the check-in status icon
  • One final style adjustment (rewriting the style of the van-search component)

Let’s look at the implementation code

        <van-nav-bar>
            <template #left>
                <van-image :src="image" round />
            </template>
            <template #title>
                <van-search placeholder="Searching for rare Earth gold." disabled />
            </template>
            <template #right>
                <van-icon name="sign" size="28" />Have been signed</template>
        </van-nav-bar>
Copy the code

TAB TAB

There is also a TAB TAB component in the Vant component library, which can be used directly. Note that: except for the 4 tabs we see are fixed, the other tags are dynamically obtained from the background, so we need to grab the official DIGGING API to obtain these states from the digging. In today’s share we will make all the tags fixed, and in the next article we will re-wrap Axios and implement the front and back interactions, and then dynamically bind the tags.

  • Again, pull a Van-tabs component from the official Vant library
  • Define another reactive property, categoryList
  • All labels are displayed in a loop through the V-for instruction

The complete code for home.vue is shown below

<template>
    <div>
        <van-nav-bar>
            <template #left>
                <van-image :src="image" round />
            </template>
            <template #title>
                <van-search placeholder="Searching for rare Earth gold." disabled />
            </template>
            <template #right>
                <van-icon name="sign" size="28" />Have been signed</template>
        </van-nav-bar>
        <van-tabs>
            <van-tab title="Attention">
                <div class="tab-list-content">Pay attention to the list</div>
            </van-tab>
            <van-tab title="Recommended">
                <div class="tab-list-content">Recommended list</div>
            </van-tab>
            <van-tab title="Hot list">
                <div class="tab-list-content">Top list</div>
            </van-tab>
             <van-tab v-for="item in categoryList" :key="item" :title="item">
                <div class="tab-list-content">{{item}} list</div>
            </van-tab>
        </van-tabs>
    </div>
</template>
Copy the code
import image from '.. /assets/images/logo1.svg';
import {reactive, toRefs} from 'vue'
export default {
    name:'Home'.setup(){
        const state = reactive({active:1.categoryList: []}); state.categoryList = ['back-end'.'front end'.'Android'.'IOS'.Artificial intelligence.'Development tools'.Code Life.'read'
         ];
        
        return {
            ...toRefs(state),
            image
        }
    }
    
}
Copy the code
.van-search{
    background-color: #f4f4f4;
    padding:0 ! important;
}
.van-search__content{
    background:#f4f4f4 ! important;
    border-radius:8px ! important;
}
.tab-list-content{
    margin-top:10px;
}
Copy the code

The final result is shown below

conclusion

In this sharing, we have realized the analysis and encapsulation of the header search bar and the tag component, and the renderings have already had a preliminary look. In the next sharing section, we’ll introduce axios asynchronous requests and interactions with back-end services to finally achieve dynamic fetching and displaying of tabs. This time to share the first here, like small partners welcome to like and pay attention to oh!