“This is the 27th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Hello everyone, yesterday we implemented the home page to dynamically load the list data according to the selected sub-tags, but there are some minor flaws in the control of the selected sub-tag style, although it is not a big problem, but we have to improve it, in addition, some basic functions about the home page are also completed. Today we originally planned to share the article details page function, but after looking for a long time about the article details background API has not found, can only temporarily put aside, next to share the boiling point page content. Content to be shared:

  • Home page sub-label style control perfect
  • Boiling point home page layout

Home page sublabel style control

We control the style of the child tags by manipulating the DOM directly. When we click on a child tag, we first update all the child tag styles of the “tag-item” class to inactive, and then set the current child tag style to active. Adding the “active” class causes a problem:

We get dom elements by the class name “tag-item”, and there are many parent tags on the home page, and each parent tag has many children tags, and these children tags all have the same class name “tag-item”, so when we click on a child tag under a parent tag, The parent tag and all child tags under other parent tags are cleared, for example: We select the “javascript” child under the “front end” parent TAB, then switch to the “back end” parent TAB and select a “Java” child. When we go back to the “front end” parent TAB, we find that the “javascript” check style is also cleared, when we actually want to keep it checked.

The following figureThen think of a solution: we have our own child tags is encapsulated a component, the component content every time according to the parent TAB to dynamic loading, so we only need to give each child tags under the parent tag to add a different attributes, and then when get dom plus this attribute filter can be solved.

  • Add a new props property categoryName to the JTags component
  • Pass the name of the parent tag as props when home.vue calls JTags
  • Modify jtags. vue to bind each LI to a data-name attribute, with the value of props – categoryName as defined above

The code and effect are as follows:

<! --JTag.vue-->
<li
  class="tag-item"
  :class="{ active: $index == 0 }"
  v-for="(tag, $index) in tagList"
  :key="tag.tag_id"
  :data-id="tag.tag_id"
  :data-name="categoryName"<!--The new content-->
  @click="clickTag(tag.tag_id)"
>
Copy the code
// JTag.vue
 const clickTag = function (tagId) {
      const { categoryName } = props;
      const tags = document.querySelectorAll(`.tag-item[data-name='${categoryName}'] `);
      / /...
    };
Copy the code
<! --Home.vue-->
 <j-tags
    url="/juejin/recommend_tag_list"
    :cateId="item.category_id"
    :categoryName="item.category_url"
  ></j-tags>
Copy the code

Boiling point home page layout

Next, in a simple analysis and implementation of the boiling point home page layout, first look at the layout of the official app, as shown in the following figure: the whole page is a large TAB component, divided into: “discover” TAB and “pay attention to” TAB, in the discovery TAB page is recommended to our circle content, the following is the specific boiling point content. And in the following TAB page is directly concerned about digging friends sent by the boiling point content. Finally, an edit icon is suspended in the lower right corner of the page. Click it to jump to the release boiling point page. Today’s share of the specific content and operation temporarily not to achieve, first to a simple implementation of the page layout. The approximate implementation idea is as follows:

  • Add a van-tabs component to the previously created fire. vue and set sticky and swipable properties to true
  • Add two child van-tabs under van-tabs with title ‘Discover’ and ‘follow’
  • Then add the “Recommended Circle” div box and the boiling point content div box to the “Discover” TAB and style it
  • Finally, place a fixed position editor icon in the lower right corner of the page

The basic layout framework is almost there. Code and renderings

<van-tabs sticky swipeable>
    <van-tab title="Discovered">
      <div class="tab-content">
        <div class="topic">
          <div class="title-box">
            <div class="title">Recommended circle</div>
            <div class="my-topic">The circle I joined</div>
          </div>
          <div class="topic-box">
            <div class="topic-name">Recommended circle</div>
            <div class="topic-name">Recommended circle</div>
            <div class="topic-name">Recommended circle</div>
            <div class="topic-name">Recommended circle</div>
            <div class="topic-name">Recommended circle</div>
          </div>
        </div>
        <div class="content-box" v-for="item in 5" :key="item">
          <div class="fire-item">
            <div class="author">
              <van-image
                class="photo"
                round
                src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
              />
              <div class="author-title">rambutan</div>
            </div>
            <div class="content">1. Rambutan, a kind of food that can be used to make food</div>
            <div class="operation">
              <div class="share"><van-icon name="share-o" />share</div>
              <div class="comment"><van-icon name="chat-o" />comments</div>
              <div class="digg"><van-icon name="good-job-o" />give a like</div>
            </div>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="Attention">
      <div class="tab-content"></div>
    </van-tab>
  </van-tabs>
  <div class="publish">
    <van-icon name="edit" />
  </div>
Copy the code

conclusion

Today’s share we fixed the home page label style control problem, but also a simple analysis and implementation of the boiling point home page layout. Tomorrow will continue to improve the boiling point home page to achieve dynamic data binding. That’s all for today’s sharing.