代码示例：
- 创建分类页面的主要文件夹和文件：
- pages/lost-found-category/lost-found-category.vue
- 在lost-found-category.vue中添加页面布局和样式：
<template>
<view class="category-container">
<view class="category-list">
<button class="category-item" v-for="(category, index) in categories" :key="index" @click="navigateTo(category.title)">
<image class="category-icon" :src="category.iconUrl"></image>
<text class="category-name">{
{ category.title }}</text>
</button>
</view>
</view>
</template>
<style>
.category-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50rpx;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 260rpx;
height: 260rpx;
margin: 30rpx;
border-radius: 10rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
font-size: 30rpx;
color: #333333;
}
.category-icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
}
.category-name {
text-align: center;
}
</style>
- 在lost-found-category.vue的script标签中，添加页面数据和方法：
<script>
export default {
data() {
return {
categories: [
{
title: '校园卡',
iconUrl: '/static/images/category-icon-1.png'
},
{
title: '钱包',
iconUrl: '/static/images/category-icon-2.png'
},
{
title: '手机',
iconUrl: '/static/images/category-icon-3.png'
},
{
title: '电子设备',
iconUrl: '/static/images/category-icon-4.png'
},
{
title: '书籍',
iconUrl: '/static/images/category-icon-5.png'
},
{
title: '衣物',
iconUrl: '/static/images/category-icon-6.png'
},
{
title: '其他',
iconUrl: '/static/images/category-icon-7.png'
}
]
}
},
methods: {
navigateTo(category) {
uni.navigateTo({
url: '/pages/lost-found-list/lost-found-list?category=' + category
})
}
}
}
</script>
- 创建失物招领列表页的主要文件夹和文件：
- pages/lost-found-list/lost-found-list.vue
- 在lost-found-list.vue中添加页面布局和样式：
<template>
<view>
<view class="card" v-for="(lostFound, index) in lostFoundList" :key="index">
<view class="card-header flexbc">
<text class="card-title">{
{ lostFound.title }}</text>
<text class="card-category">{
{ lostFound.category }}</text>
</view>
<view class="card-content flex">
<image class="wh120" src="/static/a1.jpg"></image>
<view class="ml20 mf-desc">{
{ lostFound.description }}</view>
</view>
<view class="card-footer flexbc">
<text class="card-time">{
{ lostFound.time }}</text>
<text class="card-location">{
{ lostFound.location }}</text>
</view>
</view>
</view>
</template>
<style>
.lost-found-list-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 90%;
margin-bottom: 40rpx;
border-radius: 20rpx;
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20rpx;
border-bottom: 1rpx solid #eeeeee;
}
.card-title {
font-size: 32rpx;
color: #333333;
}
.card-category {
font-size: 26rpx;
color: #999999;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 20rpx;
}
.card-image {
width: 80%;
height: auto;
margin-bottom: 20rpx;
}
.card-description {
font-size: 28rpx;
color: #666666;
text-align: center;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20rpx;
border-top: 1rpx solid #eeeeee;
}
.card-time {
font-size: 26rpx;
color: #999999;
}
.card-location {
font-size: 26rpx;
color: #999999;
}
</style>
- 在lost-found-list.vue的script标签中，添加页面数据和方法：
<script>
export default {
data() {
return {
lostFoundList: [
{
title: '校园卡丢了',
category: '校园卡',
imageUrl: '/static/images/lost-found-image-1.jpg',
description: '我在图书馆丢了校园卡，有没有好心的同学捡到了呢？',
time: '2021-06-23',
location: '图书馆'
},
{
title: '钱包掉了',
category: '钱包',
imageUrl: '/static/images/lost-found-image-2.jpg',
description: '在食堂用餐的时候，钱包掉了，里面有身份证和银行卡，求好心人拾到并归还。',
time: '2021-06-20',
location: '食堂'
},
{
title: '手机丢了',
category: '手机',
imageUrl: '/static/images/lost-found-image-3.jpg',
description: '手机在学院的走廊里丢了，有没有拾到的同学呢？',
time: '2021-06-15',
location: '学院'
}
]
}
},
onLoad(options) {
const category = options.category
if (category) {
uni.setNavigationBarTitle({
title: category
})
this.lostFoundList = this.lostFoundList.filter(item => item.category === category)
}
}
}
</script>
- 在App.vue中添加需要的全局样式：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 32rpx;
color: #333333;
}
这个示例页面由两个组件组成：失物招领分类页面和失物招领列表页面。失物招领分类页面包含各种物品的图标和名称，点击每个物品，会跳转到对应的失物招领列表页面。失物招领列表页面显示了各种物品的失物招领信息，用户可以根据分类查看不同类型的失物招领信息。
以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。
源码获取方法：
需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~
会员学习群：【一对一答疑】
如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）