Table of contents:
Code example:
- Create the main folders and files for category pages:
- pages/lost-found-category/lost-found-category.vue
- Add page layout and styles in 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>
- In the script tag of lost-found-category.vue, add page data and methods:
<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>
- The main folders and files for creating a lost and found list page:
- pages/lost-found-list/lost-found-list.vue
- Add page layout and styles in 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>
- In the script tag of lost-found-list.vue, add page data and methods:
<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>
- Add the required global styles in App.vue:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: 'Arial', 'Helvetica', sans-serif;
font-size: 32rpx;
color: #333333;
}
This example page consists of two components: a lost and found category page and a lost and found list page. The lost and found category page contains icons and names of various items. Clicking on each item will jump to the corresponding lost and found list page. The lost and found list page displays the lost and found information of various items. Users can view different types of lost and found information according to classification.
The above code is for reference only, and the specific implementation details and styles can be adjusted according to needs.
How to obtain source code:
Friends who need the complete source code, I hope you can like + favorite + comment, and then send me a private message~
Member learning group: [One-to-one Q&A]
If there is no reply to the private message, you can add a learning member assistant for consultation (WeChat: mifankeji77)