Make writing a habit together! This is the 14th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

preface

Hello everyone, in the last article in my circle we have implemented the “I join the circle” list display, the function is relatively simple, just write the style layout and directly load the data can be. The “Circle Square” we are going to share today is very similar to my circle, the only difference is that there is a classification navigation bar on the left side of the page, but the overall implementation is also very simple, we will analyze and implement it together.

Square the circle

  • A list of the circle

    As shown in the screenshot of circle Square in the official app, we can see that the page is mainly composed of three parts: search bar at the top, category index on the left and circle list on the right. See if this list of circles is almost identical to the list of circles I joined that we shared earlier? Rather than direct Ctrl C V (fully highlight the characteristics of our CV engineers, ha, ha, ha) if in pursuit of code quality can be a simple extraction and encapsulation, and should also be such in actual work, here in order to achieve the function to omit this step, so that we can reduce the workload of directly by half. Now we can focus on the remaining two modules, the top search bar and the left category navigation bar.

  • Search bar at the top

    When you click the search box, the left classification navigation and the right circle list in the current page will all be hidden, and then enter the name of the circle to search for fuzzy matching. If the circle is matched, the information of the circle will be displayed directly, and if the circle is not matched, a blank page will be displayed. The search part depends on the time, if we have enough time we will implement it, if we don’t have enough time we will implement it later.

  • Left category navigation bar

    Our share today will focus on categorizing navigation. The left navigation bar looks like a TAB component, but with each TAB title on the left, so I went to the Vant official to look at the Van-Tabs component. Unfortunately, this component does not support TAB titles on the left. Fortunately, we have found another alternative component, van-sidebar, but this component does not include the top TAB title and the bottom TAB panel like the TAB component, but only the left title area without the right content area, but it can still meet our needs, we just need to manually add a right content display area.

The approximate implementation idea is as follows:

  • Add the van-sidebar component to the content area of the Circle Square TAB in the topic.vue component
  • Add a van-sidebar-item child component to van-sidebar
  • Define the reactive attribute topicCategories and fill topicCategories with all the circles categories by requesting the official API (tag_API /v1/ query_ITEM_categories)
  • Add the V-for directive to van-sidebar-item to display all circles categorized on the page
  • Add a click event to van-sidebar-item, and pass in the unique ID corresponding to the circle category as a parameter, which is used to load the corresponding circle data under the right category
  • All that’s left is to put a copy of the circles list code in My Circles in the area to the right of the circle square, Tag_api /v1/topic/ list_BY_REc and TAG_API /v1/topic/ list_BY_cate_CURSOR to obtain the corresponding data and fill

The core code and renderings are as follows:

  <div class="topic-square">
    <div class="square-nav">
      <van-sidebar v-model="sideBarIndex">
        <van-sidebar-item title="Recommended Circles" @click="lodeTopicsByCate(0)" />
        <van-sidebar-item
          :title="cate.category_name"
          v-for="cate in topicCategories"
          :key="cate.category_id"
          @click="lodeTopicsByCate(cate.category_id)"
        />
      </van-sidebar>
    </div>
    <div class="topic-list">
      <div class="topic-box">
        <div
          class="topic"
          v-for="top in topicListByCate"
          :key="top.topic_id"
        >
          <van-image :src="top.topic.icon" />
          <div class="topic-content">
            <div class="topic-title">{{ top.topic.title }}</div>
            <span class="topic-info"
              >{{top.topic.msg_count}} {{top.topic.msg_count}}</div>
          <div
            class="topic-join"
            :class="{ 'join-in': ! top.user_interact.is_follow }"
          >
            <div class="join" v-if="top.user_interact.is_follow">Has joined</div>
            <div class="join" v-else>join</div>
          </div>
        </div>
      </div>
    </div>
 </div>
Copy the code
api.queryItemCategories().then((res) = > {
      state.topicCategories = res.data;
});

const lodeTopicsByCate = (cate_id) = > {
  if (cate_id == 0) {
    api.listByRec().then((res) = > {
      state.topicListByCate = res.data;
    });
  } else {
    api.listByCateCursor(cate_id, "0".30).then((res) = >{ state.topicListByCate = res.data; }); }}; lodeTopicsByCate(0.0);
Copy the code

conclusion

The share we implement the list on the left side of the classification and the right side of the circle in the square the circle of the load function, left a search function has not been implemented, it also refers to square the circle part of the code are copied from my circle, and two circles in the same component, so there are some redundant code, Think about it and decide to extract and encapsulate this part of the code. So we’ll focus on implementing these two feature points in our next share. That’s all for this share. Like small friends to help point a thumbs-up oh!