【做一个微信小程序】校园事件页面实现

前言

为了进一步扩展校园事件页面的功能，我们可以添加 搜索、分类筛选 和 渐变卡片色 等特性。以下是详细的方案和源码实现。

扩展功能设计

1. 搜索功能

• 在页面顶部添加搜索框，用户输入关键词后，筛选出匹配的事件。

2. 分类筛选

• 在页面顶部添加分类标签（如“全部”、“活动”、“讲座”等），用户点击标签后，筛选出对应分类的事件。

3. 渐变卡片色

• 为每个事件卡片设置渐变色背景，提升视觉效果。

源码实现

1. 目录结构

/pages/event-list/
  ├── event-list.wxml    // 页面结构
  ├── event-list.wxss    // 页面样式
  ├── event-list.js      // 页面逻辑
  └── event-list.json    // 页面配置

2. 页面配置文件event.json

// pages/event-list/event-list.json
{
   
  "navigationBarTitleText": "校园事件",
  "enablePullDownRefresh": true
}

3. 页面结构event.wxml

<!-- pages/event-list/event-list.wxml -->
<view class="container">
  <!-- 搜索框 -->
  <view class="search-bar">
    <input
      placeholder="搜索事件"
      bindinput="onSearchInput"
      value="{
    {searchKeyword}}"
    />
  </view>

  <!-- 分类筛选 -->
  <scroll-view scroll-x class="category-list">
    <view
      wx:for="{
    {categories}}"
      wx:key="id"
      class="category-item {
    {activeCategory === item.id ? 'active' : ''}}"
      bindtap="onCategoryTap"
      data-id="{
    {item.id}}"
    >
      {
  {item.name}}
    </view>
  </scroll-view>

  <!-- 事件列表 -->
  <scroll-view
    scroll-y
    style="height: calc(100vh - 200rpx);"
    bindscrolltolower="onReachBottom"
    refresher-enabled
    bindrefresherrefresh="onRefresh"
    refresher-triggered="{
    {isRefreshing}}"
  >
    <view
      wx:for="{
    {filteredEventList}}"
      wx:key="id"
      class="event-card"
      style="background: linear-gradient(135deg, { { item.colorStart}}, { { item.colorEnd}})