[プロジェクトの戦闘]Vue3+ Vant3に基づいて、ナゲットのようなアプリプロジェクトのWebバージョンを構築します-沸点リストの抽出とパッケージ化

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して9日目です。クリックしてイベントの詳細をご覧ください。

序文

みなさん、こんにちは。昨日は、沸点コンテンツとコメントコンテンツのような機能と、より多くのコメントを表示する機能を実装しました（より多くのコメントを表示する機能については、単純なページジャンプのみを実装し、コンテンツの読み込みについてさらに追加します。後で）。基本的に、沸点リスト機能は基本的に完了しています。しかし、現在、私たちが完成させたのは「発見」タブページのリストだけであり、私たちのデザインには「ホットリスト」と「フォロー」リストがあり、これらのタブページのさまざまな読み込みコンテンツに加えて、他のレイアウトと構造は同じように見えるので、3つのページの共有を実現するために、現在行われている「検出」ページでリストを抽出してカプセル化できます。今日達成したいこと：

ディスカバリーリストの抽出とパッケージ化
ホットリストの読み込み
ウォッチリストの読み込み

沸点リストの抽出とカプセル化

これまでに実装した沸点リスト（Fire.vue）では、3つのタブページのコードを除いて、他のすべてのコードがリストに属しているため、リストのカプセル化は非常に簡単です。コードを入力するだけです。 Fire.vueのリストについてすべて抽出できます。また、下の図を見てみましょう。「Latest」、「Popular」、「Following」の3ページのレイアウトは同じですが、ロードされたデータだけが異なり、図からもわかります。ページによって要求されるインターフェイスも異なり、カプセル化するリストは3つのページで共有する必要があるため、パラメータとしてさまざまな場所に動的に渡す必要があります。つまり、インターフェイスを渡す必要があります。動的に、そして他のものは直接することができます元のコードを使用するだけです。アイデアはおおまかに次のとおりです。

ビューに新しいPinList.vueコンポーネントを作成します
Fire.vueのリストデータに関するコード（html、js、css）をPinList.vueにそのままコピーします
ページ読み込みリクエストに3つの異なるインターフェースを実装するには、props属性（インターフェースアドレスの受信に使用されるurl）も定義する必要があります。
セットアップでloadメソッドを変更し、元のリクエストインターフェイス文字列をurl属性に置き換えます

コアコードは次のとおりです。

<!-- 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=>{
            //....
        });
  }
}
复制代码

ホットリストとフォローページ機能の実現

上記のリストを抽出してカプセル化しました。これで、3つのリストページに相当するものが実装されました。Fire.vueにPinListをインポートし、さまざまなURLを渡すだけで、キーコードとレンダリングは次のようになります。

<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,
  },
};
复制代码

要約する

今日の共有はとても簡単です。沸点リストを抽出してカプセル化し、ホットリストとアテンション機能を同時に実現しました。さて、この共有は最初にここにあります、それが好きな友人はいいねを与えることを歓迎します！