更新记录

1.0.0（2025-12-24） 下载此版本

1.0.0（2025-12-24）

• 首次发布
• 实现瀑布流笔记列表展示
• 实现频道导航和频道编辑功能
• 实现搜索页面（搜索历史、热门搜索）
• 支持下拉刷新、上拉加载更多
• 提供完整Mock数据示例

平台兼容性

uni-app(3.6.15)

小红书风格首页模板 (tri-xhs-home)

一个基于 uni-app 开发的小红书风格首页模板，实现了瀑布流笔记列表、频道切换、频道编辑和搜索功能。

功能特性

• 瀑布流布局 - 双列瀑布流笔记卡片展示，自动计算高度分配
• 频道导航 - 顶部频道切换，支持滑动选择
• 频道编辑 - 可自定义我的频道，拖拽排序，添加/删除频道
• 下拉刷新 - 支持下拉刷新和上拉加载更多
• 搜索页面 - 独立搜索页，支持搜索历史和热门搜索

项目结构

tri-xhs-home/
├── pages/                    # 页面目录
│   ├── index/index.vue       # 首页 - 瀑布流笔记列表
│   └── search/search.vue     # 搜索页
├── components/               # 组件目录
│   ├── NoteCard.vue          # 笔记卡片组件
│   ├── ChannelTabs.vue       # 频道导航组件
│   └── ChannelEditor.vue     # 频道编辑弹窗组件
├── api/                      # API 接口层
│   ├── index.js              # 接口统一导出
│   ├── note.js               # 笔记相关接口
│   ├── channel.js            # 频道相关接口
│   └── search.js             # 搜索相关接口
├── mock/                     # Mock 数据
│   ├── notes.json            # 笔记模拟数据
│   ├── channels.json         # 频道模拟数据
│   └── search.json           # 搜索模拟数据
├── static/                   # 静态资源
├── utils/                    # 工具函数
├── App.vue                   # 应用入口
├── main.js                   # 主入口文件
├── pages.json                # 页面配置
├── manifest.json             # 应用配置
└── uni.scss                  # 全局样式变量

快速开始

1. 导入项目

   • 使用 HBuilderX 打开项目目录

2. 运行项目

   • 点击 HBuilderX 菜单：运行 → 运行到浏览器/小程序模拟器

3. 发布项目

   • 点击 HBuilderX 菜单：发行 → 选择目标平台

自定义修改

接入真实接口

项目默认使用 mock 数据，接入真实后端只需修改 api/ 目录下的文件：

// api/note.js 示例
export function getNotes(params) {
  // 替换为真实接口调用
  return uni.request({
    url: 'https://your-api.com/notes',
    data: params
  })
}

修改样式

• 全局颜色变量在 uni.scss 中定义
• 各组件样式在对应 .vue 文件的 <style> 中修改

添加新页面

1. 在 pages/ 目录下创建页面文件夹和 .vue 文件
2. 在 pages.json 中注册页面路径

数据结构说明

笔记数据 (Note)

{
  id: '1',                    // 笔记ID
  title: '笔记标题',           // 标题
  cover: 'https://...',       // 封面图URL
  coverWidth: 750,            // 封面原始宽度
  coverHeight: 1000,          // 封面原始高度
  type: 'image',              // 类型: image/video
  likeCount: 1234,            // 点赞数
  author: {
    id: '1',
    nickname: '用户名',
    avatar: 'https://...'
  }
}

频道数据 (Channel)

{
  id: 'recommend',            // 频道ID
  name: '推荐'                // 频道名称
}

技术栈

• 框架: uni-app (Vue 2)
• 样式: SCSS
• 布局: Flexbox 瀑布流

许可证

MIT License