From 13ed2cbe11972b8d9b76990cc0ab1f499a454af6 Mon Sep 17 00:00:00 2001
From: shikong <919411476@qq.com>
Date: Thu, 17 Oct 2024 15:36:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E4=B9=8E=E7=83=AD=E6=A6=9C=20?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index/components/zhihu-hot-list/index.vue | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/pages/index/components/zhihu-hot-list/index.vue b/src/pages/index/components/zhihu-hot-list/index.vue
index ad4c6e6..7b9710a 100644
--- a/src/pages/index/components/zhihu-hot-list/index.vue
+++ b/src/pages/index/components/zhihu-hot-list/index.vue
@@ -1,13 +1,17 @@
 <script setup>
-import {onLoad} from "@dcloudio/uni-app";
+import {onReady} from "@dcloudio/uni-app";
 import {reactive} from "vue";
 
 const ctx = reactive({
-  data: []
+  data: [],
+  refresh: {
+    triggered: false
+  }
 })
 
 
 function fetchHotList() {
+  ctx.refresh.triggered = true
   uni.request({
     url: "https://api.zhihu.com/topstory/hot-list?limit=10&reverse_order=0"
   }).then(resp => {
@@ -15,10 +19,12 @@ function fetchHotList() {
     let res = resp.data || {}
     let data = res.data || []
     ctx.data = data || []
+  }).finally(() => {
+    ctx.refresh.triggered = false
   })
 }
 
-onLoad(() => {
+onReady(() => {
   fetchHotList()
 })
 </script>
@@ -26,21 +32,23 @@ onLoad(() => {
 <template>
   <view>
     <uni-section title="知乎热榜" type="line">
-      <uni-list>
-        <uni-list-item v-for="item in ctx.data" :key="item.target.id" direction="column">
-          <template #header>
-            <view class="w-full overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-lg">
-              <text>{{item.target.title}}</text>
-            </view>
-          </template>
+      <scroll-view refresher-enabled :refresher-triggered="ctx.refresh.triggered" @refresherrefresh="fetchHotList">
+        <uni-list>
+          <uni-list-item v-for="item in ctx.data" :key="item.target.id" direction="column">
+            <template #header>
+              <view class="w-full overflow-hidden overflow-ellipsis whitespace-nowrap font-bold text-lg">
+                <text>{{item.target.title}}</text>
+              </view>
+            </template>
 
-          <template #body>
-            <view class="w-full overflow-hidden overflow-ellipsis line-clamp-2 mt-1 text-sm">
-              <text>{{item.target.excerpt}}</text>
-            </view>
-          </template>
-        </uni-list-item>
-      </uni-list>
+            <template #body>
+              <view class="w-full overflow-hidden overflow-ellipsis line-clamp-2 mt-1 text-sm">
+                <text>{{item.target.excerpt}}</text>
+              </view>
+            </template>
+          </uni-list-item>
+        </uni-list>
+      </scroll-view>
     </uni-section>
   </view>