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>
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>