ajy/code/ajyApp/pages/find/index/index.nvue

<template>
	<view class="page">
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<text class="page-title">推荐</text>
		<scroll-view class="scroll-content" scroll-y="true" @scrolltolower="onReachBottom">
			<view class="recommend-grid">
				<view class="recommend-card" v-for="(item, index) in recommends" :key="index" @click="onItemClick(item)">
					<image class="card-img" :src="item.img" mode="aspectFill"></image>
					<text class="card-title">{{item.title}}</text>
					<view class="card-footer">
						<view class="badge-circle">
							<text class="badge-text">研</text>
						</view>
						<text class="footer-name">研年健康贴士</text>
						<view class="badge-official">
							<text class="official-text">官方</text>
						</view>
					</view>
				</view>
			</view>
			<text class="load-tip" v-if="recommends.length > 0">{{loadMore ? '加载中...' : ''}}</text>
		</scroll-view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			page: 1,
			loadMore: false,
			recommends: [
				{ id: 1, img: '/static/home/banner.png', title: '春季艾灸养生：温补阳气祛湿寒' },
				{ id: 2, img: '/static/home/detail.png', title: '失眠困扰？试试这几个穴位' },
				{ id: 3, img: '/static/home/banner.png', title: '办公族必看：肩颈酸痛缓解方案' },
				{ id: 4, img: '/static/home/detail.png', title: '女性调理：暖宫驱寒艾灸指南' },
				{ id: 5, img: '/static/home/banner.png', title: '中老年腰膝酸软怎么办' },
				{ id: 6, img: '/static/home/detail.png', title: '日常保健：提升免疫力的穴位' }
			]
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	onPullDownRefresh() {
		this.page = 1
		// TODO: 重新加载数据
		uni.stopPullDownRefresh()
	},
	methods: {
		onReachBottom() {
			if (this.loadMore) return
			this.page++
			// TODO: 加载更多数据
		},
		onItemClick(item) {
			// TODO: 跳转详情
			this.$toastRef.text(item.title)
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #F5F5F5;
}
.status-bar {
	background-color: #F5F5F5;
}
.page-title {
	font-weight: bold;
	font-size: 48rpx;
	color: #545F71;
	margin-left: 50rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
}
.scroll-content {
	flex: 1;
}
.recommend-grid {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 40rpx;
	padding-right: 40rpx;
}
.recommend-card {
	width: 324rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin-bottom: 28rpx;
	overflow: hidden;
}
.card-img {
	width: 324rpx;
	height: 340rpx;
}
.card-title {
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 20rpx;
	padding-bottom: 16rpx;
	font-size: 32rpx;
	color: #545F71;
	lines: 2;
	text-overflow: ellipsis;
}
.card-footer {
	flex-direction: row;
	align-items: center;
	padding-left: 16rpx;
	padding-bottom: 20rpx;
}
.badge-circle {
	width: 32rpx;
	height: 32rpx;
	background-color: #389588;
	border-radius: 32rpx;
	justify-content: center;
	align-items: center;
	margin-right: 4rpx;
}
.badge-text {
	font-size: 20rpx;
	color: #FFFFFF;
}
.footer-name {
	font-size: 24rpx;
	color: #BBBDBF;
}
.badge-official {
	width: 60rpx;
	height: 32rpx;
	background-color: #000000;
	border-radius: 4rpx;
	justify-content: center;
	align-items: center;
	margin-left: 10rpx;
}
.official-text {
	font-size: 24rpx;
	color: #EAC384;
}
.load-tip {
	text-align: center;
	font-size: 24rpx;
	color: #999999;
	padding-top: 20rpx;
	padding-bottom: 40rpx;
}
</style>