图书馆小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

142 lines
3.1 KiB

<template>
<view class="container">
<!-- 图书列表 -->
<view class="list-box">
<book-list-item
v-for="(item, index) in bookList"
:key="index"
:data="item"
:ranking="index + 1"
@click="goToDetail(item)"
/>
</view>
<!-- 加载提示 -->
<view class="load-tip" v-if="loading">加载中...</view>
<view class="load-tip" v-if="noMore">没有更多了</view>
</view>
</template>
<script>
import bookListItem from "@/components/book-list-item/book-list-item.vue";
export default {
components: {
bookListItem
},
data() {
return {
bookList: [], // 图书列表
pageNum: 1, // 当前页码
pageSize: 10, // 每页数量
loading: false, // 加载状态
noMore: false // 是否到底
};
},
onLoad() {
this.getList();
},
// 下拉刷新
onPullDownRefresh() {
this.refresh();
},
// 上拉加载
onReachBottom() {
if (!this.loading && !this.noMore) {
this.pageNum++;
this.getList();
}
},
methods: {
// 刷新
refresh() {
this.pageNum = 1;
this.bookList = [];
this.noMore = false;
this.getList();
},
// 获取列表
getList() {
this.loading = true;
// 模拟请求后端接口
setTimeout(() => {
// 模拟数据
const mockData = [
{
imgCover: "https://qiniu.aiyxlib.com/1606124577077",
title: "名侦探柯南",
nickname: "青山刚昌",
publish: "长春出版社"
},
{
imgCover: "https://qiniu.aiyxlib.com/1606124577077",
title: "三体",
nickname: "刘慈欣",
publish: "重庆出版社"
},
{
imgCover: "https://qiniu.aiyxlib.com/1606124577077",
title: "盗墓笔记",
nickname: "南派三叔",
publish: "中国友谊出版公司"
},
{
imgCover: "https://qiniu.aiyxlib.com/1606124577077",
title: "斗罗大陆",
nickname: "唐家三少",
publish: "太白文艺出版社"
},
{
imgCover: "https://qiniu.aiyxlib.com/1606124577077",
title: "斗破苍穹",
nickname: "天蚕土豆",
publish: "湖北少年儿童出版社"
}
];
let newList = [];
if (this.pageNum === 1) {
newList = mockData;
} else {
// 第2页模拟无数据
this.noMore = true;
}
this.bookList = [...this.bookList, ...newList];
this.loading = false;
uni.stopPullDownRefresh();
}, 800);
},
// 跳详情
goToDetail(item) {
uni.navigateTo({
url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn
});
}
}
};
</script>
<style lang="scss" scoped>
.container {
padding: 10px;
background-color: #f5f5f5;
min-height: 100vh;
}
.list-box {
display: flex;
flex-direction: column;
gap: 8px;
}
.load-tip {
text-align: center;
padding: 15px;
font-size: 14px;
color: #999;
}
</style>