[Project combat] Based on Vue3+Vant3 to build a web version of Nuggets-like app project - boiling point list extraction and packaging

Get into the habit of writing together! This is the 9th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

foreword

Hello everyone, yesterday we have implemented the like function of boiling point content and comment content and the function of viewing more comments (for the function of viewing more comments, we have only implemented a simple page jump, and we will add more about content loading later) . Basically, the boiling point list function is basically completed. But at present, what we have completed is only the list in the "Discover" tab page, and there is also a "Hot List" and "Following" list in our design, and in addition to the different loading content of these tab pages, other layouts and The structure seems to be the same, so we can extract and encapsulate the list in the "Discovery" page that has been done now to realize the sharing of the three pages. What we want to achieve today:

Discovery list extraction and packaging
Hot List Loading
Watchlist Loading

Boiling point list extraction and encapsulation

In the boiling point list (Fire.vue) we have implemented so far, except for the code of the three tab pages, all other codes belong to the list, so the encapsulation of the list is very simple, just need to put the code about the list in Fire.vue All can be extracted. In addition, let's take a look at the figure below. The layouts of the three pages of "Latest", "Popular" and "Following" are the same, the only difference is the loaded data, and we can also see from the figure that the three The interface requested by the page is also different, and the list we want to encapsulate needs to be shared by three pages, so we must dynamically pass in different places as parameters, that is to say, the interface needs to be dynamically passed in, and the others can be directly Just use the original code. The idea is roughly as follows:

Create a new PinList.vue component in views
Copy the code (html, js and css) about the list data in Fire.vue to PinList.vue intact
In order to implement three different interfaces for page load requests, we also need to define a props attribute - url, which is used to receive the interface address
Modify the load method in setup and replace the original request interface string with the url attribute

The core code is as follows:

<!-- html部分没有需要修改，只需把Fire.vue中关于列表的直接拷贝过来即可 -->
<div class="topic">
    <div class="title-box"></div>
    <div class="topic-box"></div>
</div>
<van-pull-refresh></van-pull-refresh>
复制代码

//js 代码中也是把Fire.vue中列表相关的拷贝过来，然后再添加一个url属性
export default {
  props: {
    url: {
      type: String,
      required: true,
    },
  },
  setup(props,ctx){
    const { url } = props;
    const onLoad = function () {
      http
        .post(url, {
          cursor: pageNo,
          limit: 20,
          sortType: 300,
        }).then(res=>{
            //....
        });
  }
}
复制代码

Hot list and follow page function realization

We have extracted and encapsulated the list above. Now the equivalent of three list pages have been implemented. We only need to import PinList in Fire.vue and pass in different urls to achieve it. The key code and renderings are as follows:

<template>
  <van-tabs sticky color="#1e80ff" title-active-color="#1e80ff">
    <van-tab title="发现">
      <div class="tab-content">
        <pin-list url="/juejin/recommend_pins" />
      </div>
    </van-tab>
    <van-tab title="热榜">
      <div class="tab-content">
        <pin-list url="/juejin/hot_pins" />
      </div>
    </van-tab>
    <van-tab title="关注">
      <div class="tab-content">
        <pin-list url="/juejin/follow_pins" />
      </div>
    </van-tab>
  </van-tabs>
  <div class="publish">
    <van-icon name="edit" />
  </div>
</template>
复制代码

import PinList from "./PinList.vue";
export default {
  components: {
    PinList,
  },
};
复制代码

Summarize

Today's sharing is very simple. We extracted and encapsulated the boiling point list, and realized the hot list and attention functions at the same time. Well, this sharing is here first, friends who like it are welcome to give a like!