library-wechat/subpkg/pages/collect-list/collect-list.vue

<template>
	<view class="collection-page">
		<view class="content-box">
			<view class="empty" v-if="bookCollectList.length === 0">
        <uni-icons style="margin-left: 20px;" custom-prefix="iconfont" type="icon-kongshuju" size="80"></uni-icons>
        <text style="margin-top: 20px;">暂无收藏的图书~</text>
			</view>
			<view class="recommendation-list" v-else>
				<view
					class="book-item"
					v-for="(item, index) in bookCollectList"
					@click="goToBookDetail(item)"
					:key="index"
				>
					<image class="book-cover" :src="item.cover"></image>
					<view class="book-title">{{ item.title }}</view>
				</view>
			</view>
			<uni-load-more status="loading" v-if="isLoading"></uni-load-more>
			<view class="no-more" v-if="noMore && bookCollectList.length > 0">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			noMore: false,
			pageNum: 1,
			pageSize: 5,

			bookCollectList: [
				{ isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
				{ isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
				{ isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
			],
		}
	},

	onLoad() {
	},

	onPullDownRefresh() {
		this.refreshData()
	},

	onReachBottom() {
		if (this.noMore || this.isLoading) return
		this.loadMore()
	},

	methods: {
		refreshData() {
			this.isLoading = true
			setTimeout(() => {
				this.bookCollectList = [
					{ isbn: '9787544741110', title: '人工智能基础——数学知识', cover: 'https://qiniu.aiyxlib.com/1606124577077' },
					{ isbn: '9787539938032', title: 'Vim 8文本处理实战', cover: 'https://qiniu.aiyxlib.com/1606178450151' },
					{ isbn: '9787536692930', title: 'Oracle从入门到精通', cover: 'https://qiniu.aiyxlib.com/1606123986028' }
				]
				this.isLoading = false
				uni.stopPullDownRefresh()
			}, 500)
		},

		loadMore() {
			this.isLoading = true
			this.pageNum++
			setTimeout(() => {
				this.noMore = true
				this.isLoading = false
			}, 500)
		},

		goToBookDetail(item) {
			uni.navigateTo({ url: "/subpkg/pages/book-detail/book-detail?isbn=" + item.isbn })
		},
	},
}
</script>

<style lang="scss" scoped>
.collection-page {
  padding: 10px 0;
	background-color: #f7f8fa;
	min-height: 100vh;
}

.content-box {
	padding: 0 10px;
}

.empty {
	padding: 60px 0;
}
.no-more {
	text-align: center;
	padding: 20px 0;
	color: #999;
	font-size: 13px;
}

.recommendation-list{
  flex-wrap: wrap;
  .book-item {
    margin-bottom: 16px;
  }
}
</style>