知乎热榜 下拉刷新

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,6 +32,7 @@ onLoad(() => {
 <template>
   <view>
     <uni-section title="知乎热榜" type="line">
+      <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>
@@ -41,6 +48,7 @@ onLoad(() => {
             </template>
           </uni-list-item>
         </uni-list>
+      </scroll-view>
     </uni-section>
   </view>