Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

知乎热榜 下拉刷新

Browse Source
This commit is contained in:
shikong 2024-10-17 15:36:42 +08:00
parent 9e30d48765
commit 13ed2cbe11
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
1 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/index/components/zhihu-hot-list/index.vue
View File

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