【页面案例汇总】微信小程序失物招领分类页

代码示例：

---

1. 创建分类页面的主要文件夹和文件：

• pages/lost-found-category/lost-found-category.vue

2. 在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>

3. 在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>

4. 创建失物招领列表页的主要文件夹和文件：

• pages/lost-found-list/lost-found-list.vue

5. 在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>

6. 在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>

7. 在App.vue中添加需要的全局样式：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 32rpx;
  color: #333333;
}

这个示例页面由两个组件组成：失物招领分类页面和失物招领列表页面。失物招领分类页面包含各种物品的图标和名称，点击每个物品，会跳转到对应的失物招领列表页面。失物招领列表页面显示了各种物品的失物招领信息，用户可以根据分类查看不同类型的失物招领信息。

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）