This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

List List List

Think of a list component starting with the Nuggets

Open the gold homepage, if not the following, it is likely to be a route to the specified interface, or network card.

If you have been exploring knowledge for a long time (Hua Shui Mo Yu), you should also know that similar layout not only appears in the home page, personal center, my small book and other interfaces, all are similar lists. So this is the time to imagine, their development is CV method or written components?

If you want to know why, you can still look for a wave.

Look at the structure of the Nuggets’ list

Here is a comparison of the personal center article list page and the home page, you can clearly see that the structure of the two cannot be said to be similar, it can only be said to be exactly the same, so is it CV or componentization development?

No matter what, since we are talking about components, unity should be considered componentized development.

But the difference is that the list in my little book is completely different from the structure here.

But since this is a list of components, can you imagine that they use the same component, but do specific differentiation?

Build a structure

Look at the differences in the list of nuggets, so if we want to make their own list plug-in is it possible to refer to?

For example, make a default component that displays text content with a fixed layout and structure divided into header,footer, and Content.

Follow this idea to break down the structure of the list of nuggets

The default footer section is hidden and unused because of the height ratio on the right. However, in the process of component development, consider the possibility of use, and do the first hand.

// list-item
<template lang="pug">
block content
div.list-item
    div.list-item-header(v-if="header")
        slot(name="header") {{header}}
    div.list-item-content
        slot
    div.list-item-footer(v-if="footer")
        slot(name="footer") {{footer}}
<template>
Copy the code

Note: This is not the list parent, but the list-item list item component, starting here.

Interestingly, the top list component can also be handled here, and the header section can be used to hold the latest and hottest categories in the nuggets list.

Differentiation treatment.

There are two kinds of differences here. One is from the list of articles on the front page to the list of the volume, which is almost completely different, so you need to add an additional sub-component to develop components for the layout of the volume.

Before dealing with differentiation, it is important to understand that the core of the list component is the presentation list, so the component should be less about the structure and style of the content style and more about setting the stage for the presentation list.

Based on the point mentioned in the online section, there is no new component to handle large differences if not necessary, but the structure from the article to the volume is different, so a new subcomponent is needed.

It differs from list-item in that it provides a container for the structure of the volume, which can be adapted to the layout of the volume structure.

If it is a small difference, the styling can be left to development time, and the components remain in a clean container structure.

If the differences are slightly larger, such as the header and footer sections that need to be adjusted, you can pass in a type parameter to control the class name, which in turn changes the layout style.