更新记录

1.0.1（2025-08-05） 下载此版本

v1.0.1 (2025-08-05)

✨ 新功能

• 新增tabs横向滚动支持，当标签数量过多时可以左右滑动查看
• 优化tab项布局，每个tab都有最小宽度保证，避免内容被压缩

**

1.0.0（2025-08-01） 下载此版本

v1.0.0 (2025-07-30)

• 发布内容列表组件
• 支持多标签页切换功能
• 集成下拉刷新和上拉加载更多
• 内置精美的卡片式内容展示
• 支持内容点击事件
• 提供切换动画效果
• 包含加载状态和空数据提示
• 支持自定义标签页配置
• 内置模拟数据便于测试

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

ContentList 内容列表组件

一个支持多tab切换的内容展示组件，适用于推荐、美食、旅游、宠物、培训等不同类型的内容展示。

功能特性

• 📱 响应式设计，适配移动端
• 🎨 精美的UI设计和流畅的动画效果
• 🔄 支持下拉刷新和上拉加载更多
• 🏷️ 多种内容分类标签样式
• ❤️ 支持点赞和浏览数据展示
• 📊 内置丰富的模拟数据
• 👆 tabs支持左右滑动，适配多标签场景

使用方式

<template>
  <view>
    <content-list 
      :tabs-config="tabsConfig"
      :list-data="listData"
      @item-click="handleItemClick"
      @like-item="handleLikeItem"
    />
  </view>
</template>

<script>
import ContentList from '@/components/content-list-compone/index.vue'

export default {
  components: {
    ContentList
  },
  data() {
    return {
      tabsConfig: [
        { name: '推荐', key: 'recommend' },
        { name: '美食', key: 'latest' },
        { name: '旅游', key: 'sales' },
        { name: '宠物', key: 'price' },
        { name: '培训', key: 'popularity' }
        // 支持更多标签，如：
        // { name: '摄影', key: 'photography' },
        // { name: '健身', key: 'fitness' },
        // { name: '音乐', key: 'music' },
        // { name: '读书', key: 'reading' }
        // tabs过多时会自动支持左右滑动
      ],
      listData: {}
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('点击了内容:', item)
    },
    handleLikeItem(item) {
      console.log('点赞了内容:', item)
    }
  }
}
</script>

Props

tabsConfig 默认配置

[
  { name: '推荐', key: 'recommend' },
  { name: '美食', key: 'latest' },
  { name: '旅游', key: 'sales' },
  { name: '宠物', key: 'price' },
  { name: '培训', key: 'popularity' }
]

Events

数据结构

内容项数据结构

{
  tag: '热门推荐',              // 分类标签文本
  category: 'recommend',        // 分类类型，影响标签样式
  title: '内容标题',            // 内容标题
  description: '内容描述...',   // 内容描述
  image: 'https://...',         // 主图片地址
  tags: ['标签1', '标签2'],     // 标签数组
  authorAvatar: 'https://...',  // 作者头像
  authorName: '作者名称',       // 作者名称
  likes: 1520,                  // 点赞数
  views: 8800                   // 浏览数
}

内置分类样式

组件支持以下几种分类，每种分类都有对应的颜色主题：

• recommend - 推荐 (红色渐变)
• food - 美食 (橙色渐变)
• travel - 旅游 (绿色渐变)
• pet - 宠物 (蓝色渐变)
• training - 培训 (紫色渐变)

注意事项

1. 如果不传入 listData，组件会使用内置的模拟数据
2. 组件采用 rpx 单位，适配不同屏幕尺寸
3. 图片地址需要是有效的网络地址或本地资源路径
4. 组件内置了下拉刷新和上拉加载功能，适合数据较多的场景
5. tabs支持横向滚动，当标签数量过多时可以左右滑动查看所有标签
6. 每个tab都有最小宽度保证，不会因为标签过多而被压缩