笔记列表页面布局

这是现在小程序中实际用到的列表页面，请看真实的笔记列表页面需求：

页面包含三部分，广告、内容介绍、笔记列表。其中，广告占页面高度 260rpx，内容介绍高度 200rpx，笔记列表是一个卡片列表，卡片内容分为上下两部分，上部分是标题，下部分是标签，标签可以有多个，一行内显示，两个标签之间要留有间隙。当列表内容很多，一个屏幕无法显示出来时，要可以滑动查看列表内容。滑动时，上方的广告不滑动，内容介绍和笔记列表进行滑动，显示最新内容。

主题样式为 WEUI，但是标签为蓝色。

广告为 Banner 广告，高度为 120px，如果转换为 rpx 大概为 240rpx。所以广告上下可以留一些间隙。

内容介绍是卡片样式，分为上下两部分，上方为项目标题，介绍这个笔记列表归属哪个项目，下方是内容介绍，介绍这个项目是什么。

笔记列表的内容，为该项目从想法到实现的全部内容，每个文件都是一段内容，介绍想法、布局、实现、部署等等。以 Markdown 文件为载体，在列表页面只显示文件的标题，和人为绑定的标签，标签可以为多个，例如想法、开发、部署等，当为开发时，可以牵涉到使用什么语言，例如 Go、Js 等。

当我们了解了需求之后，可以发现这个通过 flex 布局可以很好的实现。

其中页面 WXML 如下：

<view class="container">
  <!-- 广告部分 - 固定不滚动 -->
  <view class="ad-container">
    <ad unit-id="your-ad-unit-id" class="banner-ad"></ad>
  </view>

  <!-- 可滚动区域 -->
  <scroll-view class="scroll-area" scroll-y>
    <!-- 内容介绍部分 -->
    <view class="content-intro">
      <view class="intro-title">{{projectTitle}}</view>
      <view class="intro-description">{{projectDescription}}</view>
    </view>

    <!-- 笔记列表 -->
    <view class="note-list">
      <block wx:for="{{notes}}" wx:key="id">
        <view class="note-card" bindtap="onNoteTap" data-id="{{item.id}}">
          <view class="note-title">{{item.title}}</view>
          <view class="note-tags">
            <block wx:for="{{item.tags}}" wx:key="*this">
              <view class="tag">{{item}}</view>
            </block>
          </view>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

样式 WXSS 如下：

/* 使用WEUI基础样式 */
@import '/path/to/weui.wxss';

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 广告区域 */
.ad-container {
  height: 260rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}

.banner-ad {
  width: 100%;
  height: 240rpx;
}

/* 可滚动区域 */
.scroll-area {
  flex: 1;
}

/* 内容介绍 */
.content-intro {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin: 10rpx 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.intro-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.intro-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

/* 笔记列表 */
.note-list {
  padding: 20rpx;
}

.note-card {
  background-color: #fff;
  padding: 25rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.note-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 15rpx;
  color: #333;
}

.note-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #1aad19; /* WEUI绿色 */
  color: white;
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
  margin-bottom: 5rpx;
}

/* 修改标签为蓝色 */
.tag {
  background-color: #10aeff;
}

数据 JS 内容如下：

Page({
  data: {
    projectTitle: '项目开发笔记',
    projectDescription: '本项目记录从构思到实现的全过程，包含需求分析、技术选型、开发过程和部署方案等内容。',
    notes: [
      {
        id: 1,
        title: '项目构思与需求分析',
        tags: ['想法', '规划']
      },
      {
        id: 2,
        title: '技术选型与架构设计',
        tags: ['设计', '架构']
      },
      {
        id: 3,
        title: '前端界面开发',
        tags: ['开发', 'Js', '小程序']
      },
      {
        id: 4,
        title: '后端API开发',
        tags: ['开发', 'Go', 'API']
      },
      {
        id: 5,
        title: '测试与调试',
        tags: ['测试', '调试']
      },
      {
        id: 6,
        title: '部署上线方案',
        tags: ['部署', '运维']
      }
    ]
  },

  onNoteTap: function(e) {
    const noteId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/note-detail/note-detail?id=${noteId}`
    });
  },

  onLoad: function() {
    // 可以在这里加载实际数据
  }
});

笔记列表页面布局#

笔记列表页面布局