ZhihuDaily Download - ZhihuDaily Quellcode Download

ZhihuDaily

Anderer Quellcode

1.0.0

Herunterladen

1. Installationsprozess und Projekteinführung

Installieren

Nach der Reaktion begeisterter Menschen,

 npm install
npm run serve

einführen

Dieses Projekt wird auf der Grundlage des Inhalts der iOS -Seite von Zhihu täglich von April bis Mai 2022 repliziert. Es dient nur zum Lernen und wird nicht für Gewinn verwendet.

2. Seitenlogik

Es ist in zwei Teile unterteilt: Seiten und Komponenten

2.1 index.vue

Diese Seite ist die Startseite und die Adresse lautet '/' in der Routing -Komponente. Enthält Headcontent .

Hauptkontent.Vue -Klicken Sie auf den Avatar, um zu Swipe.vue (Seitenleiste) zu springen.

Swipe.vue und Newslist .

2.2 Swipe.Vue

Diese Seite ist eine Seitenleiste, Sie können meine Favoriten eingeben .

2.3 sammeln

Diese Seite ist ein Favorit, der mehrere Lieblingsinhalte enthält. Klicken Sie auf, um NewsDetail.vue (Nachrichtendetails Seite) einzugeben, um NewsDetail.vue einzugeben).

2.4 NewsDetail.vue

Es kann auf verschiedene Arten zugegriffen werden, einschließlich Newsmenu.vue (Funktionsleiste) und Share.vue (Share -Seite)

NewsMenu.vue enthält vier Funktionen: Likes, Sammlungen, Kommentare und Teilen. Kommentare werden zum Kommentar springen .

2.5 Kommentar.Vue

Kommentarseite, einschließlich langer Kommentare und kurzen Kommentare, klicken Sie auf den unten

2.6 writeCompue.vue

Sie können Kommentare zur Seite writeCompue.vue schreiben. Klicken Sie auf Post und springen Sie zurück zu comment.vue.vue

3. Sortierung der Funktionspunkte

3.1 Belastung.Vue

Anzeige von Daten, Anzeige von Avataren und Sprungseiten, keine Schwierigkeit

3.2 Swipe.Vue

Handgeschriebene Karusselldiagramme realisieren automatisch (alle 4s) und links und rechts Swiping -Schaltungen

3.3 Newslist.vue

Nachrichtenliste, Swiping Down zeigt Nachrichteninhalte aus den letzten Tagen unter Verwendung von Element-UIs Infinite Scrolling-Komponente

3.4 sammeln

Klicken Sie auf der Seite auf die Favoriten -Schaltfläche, und der entsprechende Nachrichteninhalt wird auf meiner Favoriten -Seite angezeigt, ohne zu verlieren, ohne zu verlieren

3.5 Newsmenu.vue

Sie können klicken, um Kommentare zu mögen, zu sammeln und zu teilen und es nach dem Auftaten nicht zu verlieren.

3.6 Share.vue

Nach dem Klicken wird die Freigabeseite angezeigt und der Hintergrund dahinter wird grau. Klicken Sie auf den Hintergrund oder klicken Sie auf Abbrechen und die Freigabeseite verschwindet.

3.7 Kommentar.Vue

Zeigen Sie Kommentare wie Kommentare an, aktualisieren und beenden Sie, ohne zu verschwinden

3.8 WriteCompue.Vue

Zoomen Sie nicht nach dem Klicken auf das Handy
Nur wenn Inhalte vorhanden sind, können Sie kommentieren und posten. Wenn es einen Kommentarinhalt gibt, ändert sich die Farbe der Post -Schaltfläche.
Gehen Sie nach dem Posten zurück zu Kommentar. Stellen Sie und geben Sie lange Kommentare und kurze Kommentare entsprechend der Dauer der Kommentare ein

4. Implementierung

Wählen Sie einige wichtigere Implementierungen für die Erläuterung aus

4.1 Newslist.vue

Verwenden Sie V-Infinite-Scroll in Element-UI, um nach unten abzurufen, um die Nachrichten über vergangene Daten auszulösen, um Nachrichten über vergangene Daten zu erhalten.