<template>
|
<view class="wrapper">
|
<view style="height: 100rpx"></view>
|
<!-- 内容区域 -->
|
<scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
|
<view class="waterfall">
|
|
<view class="item" v-for="(item, idx) in mockData" :key="item.id" @click="handleItemClick(item)">
|
<text class="title">{{ item.title }}</text>
|
<text class="publishDate">发布时间:{{ item.publishDate }}</text>
|
</view>
|
|
</view>
|
<!-- <view style="height: 150rpx;"></view> -->
|
<!-- 改进的加载更多提示 -->
|
<view class="load-more">
|
<u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
|
:load-text="{
|
loadmore: '上拉加载更多',
|
loading: '正在加载',
|
nomore: '没有更多了'
|
}" />
|
</view>
|
<view style="height:150rpx">
|
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import '@/components/uview-components/uview-ui';
|
import { getNews,addNews,editNews,publish,delById } from '@/api/news.js'
|
export default {
|
data() {
|
return {
|
query: {
|
pageNumber: 1,
|
pageSize: 10,
|
publish:1,
|
},
|
loading:false,
|
total:0,
|
mockData:[],
|
noMore:false,
|
|
}
|
},
|
mounted() {
|
|
},
|
onLoad() {
|
this.getNewsPage();
|
},
|
methods: {
|
handleItemClick(item){
|
uni.navigateTo({
|
url: `/pages/news/detail?id=${item.id}` // 参数通过 URL 传递
|
});
|
},
|
async getNewsPage(){
|
try {
|
const res = await getNews(this.query);
|
this.loading = false;
|
if(res.statusCode === 200){
|
const newData = res.data.data.map(value =>({
|
id:value.id,
|
title:value.title,
|
publish:value.publish,
|
publishDate:value.publishDate
|
}));
|
// 更新总数据量
|
this.total = res.data.total || 0;
|
// 追加或替换数据
|
this.mockData = this.query.pageNumber === 1 ?
|
newData :
|
[...this.mockData, ...newData];
|
|
// 判断是否还有更多数据
|
this.noMore = newData.length < this.query.pageSize ||
|
this.mockData.length >= this.total;
|
|
}
|
|
} catch (error) {
|
console.error('加载失败:', error);
|
// 失败时回退页码
|
if (this.query.pageNumber > 1) {
|
this.query.pageNumber -= 1;
|
}
|
} finally {
|
this.loading = false;
|
uni.hideLoading();
|
uni.stopPullDownRefresh();
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.wrapper {
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
background-color: #f5f5f5;
|
height: 100%;
|
|
.content {
|
padding-bottom: 20rpx;
|
box-sizing: border-box;
|
|
.waterfall {
|
display: flex;
|
flex-direction: column;
|
padding: 0 10rpx;
|
|
.item {
|
background: #fff;
|
border-radius: 12rpx;
|
padding: 24rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
&:active {
|
transform: scale(0.98);
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.title {
|
display: block;
|
font-size: 28rpx;
|
color: #333;
|
font-weight: 500;
|
line-height: 1.5;
|
margin-bottom: 12rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
|
.publishDate {
|
display: block;
|
font-size: 22rpx;
|
color: #999;
|
text-align: right;
|
}
|
}
|
}
|
|
.load-more {
|
padding: 30rpx 0;
|
background-color: transparent;
|
|
.u-loadmore {
|
font-size: 26rpx !important;
|
color: #999 !important;
|
}
|
}
|
}
|
}
|
|
/* 平板及以上设备适配 */
|
@media (min-width: 768px) {
|
.waterfall {
|
flex-direction: row !important;
|
flex-wrap: wrap;
|
|
.item {
|
width: calc(50% - 10rpx);
|
margin: 0 5rpx 20rpx;
|
}
|
}
|
}
|
</style>
|
