118 行
2.5 KiB
Plaintext
118 行
2.5 KiB
Plaintext
<template>
|
|
<view style="flex: 1;">
|
|
<waterflow v-if="isShow" style="flex: 1;" cross-axis-gap="5" main-axis-gap="5">
|
|
<flow-item v-for="(item, index) in list" :key="index" @click="itemClick(item['author_name'] as string | null)">
|
|
<view class="item">
|
|
<image class="img" :fade-show="true" :src="item['cover']" mode="widthFix"></image>
|
|
<text class="name">{{ item['author_name'] }}</text>
|
|
<text class="title">{{ item['title'] }}</text>
|
|
<text class="time">{{ item['published_at'] }}</text>
|
|
</view>
|
|
</flow-item>
|
|
<!-- 测试验证issues 20342 问题 开始 -->
|
|
<flow-item slot="refresher" id="refresher" type=2>
|
|
<text>自定义加载</text>
|
|
</flow-item>
|
|
<flow-item slot="load-more" id="loadmore" type=6 class="load-more-box">
|
|
<text>加载更多</text>
|
|
</flow-item>
|
|
<!-- 测试验证issues 20342 问题 结束-->
|
|
</waterflow>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const list = ref<UTSJSONObject[]>([] as UTSJSONObject[])
|
|
const isShow = ref<boolean>(true)
|
|
|
|
const itemClick = (title : string | null) => {
|
|
if (title != null) {
|
|
uni.showToast({
|
|
title: title,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
function getList() {
|
|
uni.showLoading({
|
|
title: 'loading...'
|
|
})
|
|
|
|
uni.request<UTSJSONObject[]>({
|
|
url: 'https://unidemo.dcloud.net.cn/api/news?column=title,author_name,cover,published_at',
|
|
method: "GET",
|
|
success: (res : RequestSuccess<UTSJSONObject[]>) => {
|
|
if (res.statusCode == 200) {
|
|
const result = res.data
|
|
|
|
if (result != null) {
|
|
list.value.push(...result)
|
|
}
|
|
}
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
}
|
|
|
|
function changeShow() {
|
|
isShow.value = false
|
|
}
|
|
|
|
function verify() {
|
|
return true
|
|
}
|
|
|
|
onLoad((_: OnLoadOptions) => {
|
|
getList()
|
|
})
|
|
|
|
defineExpose({
|
|
changeShow,
|
|
verify
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.item {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
background-color: white;
|
|
}
|
|
|
|
.img {
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin: 10px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
margin: 0 10px;
|
|
color: gray;
|
|
}
|
|
|
|
.time {
|
|
font-size: 14px;
|
|
color: gray;
|
|
margin: 10px;
|
|
}
|
|
|
|
.load-more-box {
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
height: 45px;
|
|
width: 100%;
|
|
border-style: solid;
|
|
}
|
|
</style>
|