【页面案例汇总】微信小程序题型分类页面

最新推荐文章于 2025-04-18 00:19:18 发布

米饭，℡

最新推荐文章于 2025-04-18 00:19:18 发布

阅读量277

点赞数

分类专栏：页面案例文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/weixin_42317757/article/details/134257792

版权

页面案例专栏收录该内容

24 篇文章

订阅专栏

文章描述了一个微信小程序中用于展示题型分类的页面组件，包括单选题、多选题等，用户点击后会跳转到相应分类的详细页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【页面案例汇总】微信小程序题型分类页面：

<template>
  <view class="container">
    <view class="header">题型分类</view>
    <view class="category-list">
      <view class="category-item" v-for="category in categories" :key="category.id" @click="goToCategory(category)">
        <image class="category-icon" :src="category.icon"></image>
        <text class="category-name">{{ category.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: "单选题",
          icon: "/static/images/single-choice.png"
        },
        {
          id: 2,
          name: "多选题",
          icon: "/static/images/multi-choice.png"
        },
        {
          id: 3,
          name: "判断题",
          icon: "/static/images/true-false.png"
        },
        {
          id: 4,
          name: "填空题",
          icon: "/static/images/fill-blank.png"
        }
      ]
    };
  },
  methods: {
    goToCategory(category) {
      uni.navigateTo({
        url: `/pages/category/category?id=${category.id}&name=${category.name}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.category-item {
  width: 120px;
  height: 120px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0px 5px 5px #888888;
  transition: all 0.2s ease-in-out;
}
.category-item:hover {
  transform: scale(1.1);
}
.category-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.category-name {
  font-size: 16px;
  text-align: center;
}
</style>

这个页面展示了四个题型分类的图标和名称，用户点击某个分类后会跳转到该分类的详情页面。