更新记录

1.0.0（2026-06-02）

• 初始版本
• 支持自定义渐变色
• 支持页数和百分比显示
• 支持拖动调整进度
• 基于 uni-app 原生 slider 实现拖动

平台兼容性

uni-app(3.7.8)

read-progress-pro

UniApp 阅读进度条组件，基于 Easycom 规范开发，支持自定义颜色、滑块、页数显示和拖动功能，适用于阅读类应用展示阅读进度。

🎯 特性

• ✨ 自定义渐变色 - 支持自定义进度条渐变色，打造独特视觉效果
• 📖 页数显示 - 实时显示当前页数/总页数
• 📊 百分比进度 - 直观展示阅读完成百分比
• 🎯 滑块控制 - 可配置的滑块指示器
• ⚡ 平滑动画 - 流畅的过渡动画效果
• 🖱️ 拖动支持 - 支持拖动调整进度（默认关闭）
• 📱 多端兼容 - 完美兼容 H5、小程序、App 等平台

📦 安装

Easycom 自动引入（推荐）

在项目根目录的 pages.json 中配置：

{
  "pages": [
    {
      "path": "pages/index/index"
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      "read-progress-pro": "@/components/read-progress-pro/read-progress-pro.vue"
    }
  }
}

配置后，在任意页面中直接使用 <read-progress-pro> 标签即可，无需手动 import。

手动引入

<template>
  <read-progress-pro :progress="50" />
</template>

<script>
import ReadProgressPro from '@/components/read-progress-pro/read-progress-pro.vue'

export default {
  components: {
    ReadProgressPro
  }
}
</script>

🔧 属性说明

📡 事件说明

🚀 使用示例

基础用法

<template>
  <view class="container">
    <read-progress-pro 
      :progress="25" 
      :currentPage="80" 
      :totalPages="320"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

可拖动进度条

<template>
  <view class="container">
    <read-progress-pro 
      :progress="progress" 
      :currentPage="currentPage" 
      :totalPages="320"
      :draggable="true"
      @drag=""
      @dragEnd="End"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 25,
      currentPage: 80
    }
  },
  methods: {
    ({ progress, currentPage, totalPages }) {
      this.progress = progress
      this.currentPage = currentPage
      console.log(`正在阅读: 第 ${currentPage} 页 (${progress.toFixed(1)}%)`)
    },
    End(progress) {
      console.log('拖动结束，当前进度:', progress)
    }
  }
}
</script>

自定义颜色

<template>
  <view class="container">
    <!-- 红色渐变 -->
    <read-progress-pro 
      :progress="45" 
      fillColor="linear-gradient(90deg, #f093fb 0%, #f5576c 100%)"
    />

    <!-- 绿色渐变 -->
    <read-progress-pro 
      :progress="60" 
      fillColor="linear-gradient(90deg, #43e97b 0%, #38f9d7 100%)"
    />

    <!-- 紫色渐变 -->
    <read-progress-pro 
      :progress="75" 
      fillColor="linear-gradient(90deg, #667eea 0%, #764ba2 100%)"
    />

    <!-- 单色 -->
    <read-progress-pro 
      :progress="30" 
      fillColor="#ff6b6b"
    />
  </view>
</template>

配置组合

<template>
  <view class="container">
    <!-- 仅显示进度条 -->
    <read-progress-pro 
      :progress="45" 
      :showText="false" 
      :showPercentage="false" 
    />

    <!-- 仅显示页数 -->
    <read-progress-pro 
      :progress="67" 
      :showPercentage="false" 
      :currentPage="134" 
      :totalPages="200"
    />

    <!-- 仅显示百分比 -->
    <read-progress-pro 
      :progress="82" 
      :showText="false" 
      :showSlider="false" 
    />

    <!-- 隐藏滑块 -->
    <read-progress-pro 
      :progress="50" 
      :showSlider="false" 
    />

    <!-- 可拖动但隐藏滑块 -->
    <read-progress-pro 
      :progress="30" 
      :draggable="true" 
      :showSlider="false" 
    />
  </view>
</template>

🎨 设计说明

默认配色方案

组件默认使用支付宝蓝色系：

• 主色: #1677ff（深蓝）
• 渐变色: #1890ff（浅蓝）
• 轨道色: #e8e8e8（浅灰）

滑块样式

滑块圆点设计特点：

• 白色背景配合蓝色边框
• 带有柔和的阴影效果
• 可拖动时会增大尺寸便于操作

🔄 数据双向绑定

组件支持 .sync 修饰符实现数据双向绑定：

<template>
  <read-progress-pro 
    :progress.sync="progress" 
    :currentPage.sync="currentPage"
    :totalPages="320"
    :draggable="true"
  />
</template>

<script>
export default {
  data() {
    return {
      progress: 25,
      currentPage: 80
    }
  }
}
</script>

📱 场景示例

小说阅读页面

<template>
  <view class="reader-page">
    <view class="reader-content">
      <!-- 小说内容 -->
      <text class="content-text">{{ novelContent }}</text>
    </view>

    <view class="bottom-bar">
      <read-progress-pro 
        :progress="readProgress" 
        :currentPage="currentPage" 
        :totalPages="totalPages"
        :draggable="true"
        @drag=""
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      novelContent: '小说内容...',
      currentPage: 45,
      totalPages: 320
    }
  },
  computed: {
    readProgress() {
      return (this.currentPage / this.totalPages) * 100
    }
  },
  methods: {
    ({ currentPage }) {
      this.currentPage = currentPage
    }
  }
}
</script>

学习进度追踪

<template>
  <view class="study-page">
    <view class="course-item" v-for="course in courses" :key="course.id">
      <view class="course-info">
        <text class="course-name">{{ course.name }}</text>
        <text class="course-chapter">第 {{ course.chapter }} / {{ course.totalChapters }} 章</text>
      </view>
      <read-progress-pro 
        :progress="course.progress" 
        :currentPage="course.chapter" 
        :totalPages="course.totalChapters"
        :showPercentage="false"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      courses: [
        { id: 1, name: 'Vue.js 基础', chapter: 5, totalChapters: 12, progress: 42 },
        { id: 2, name: 'TypeScript 进阶', chapter: 3, totalChapters: 8, progress: 38 },
        { id: 3, name: 'Node.js 实战', chapter: 8, totalChapters: 10, progress: 80 }
      ]
    }
  }
}
</script>

🛠️ 开发指南

开发环境

# 安装依赖
npm install

# 运行 H5 开发环境
npm run dev:h5

# 构建 H5
npm run build:h5

# 运行微信小程序
npm run dev:mp-weixin

# 构建微信小程序
npm run build:mp-weixin

目录结构

components/
└── read-progress-pro/
    ├── read-progress-pro.vue    # 组件主文件
    ├── package.json             # 组件配置
    └── README.md               # 使用文档

📄 许可证

MIT License

📝 更新日志

v1.0.0

• 初始版本
• 支持自定义渐变色
• 支持页数和百分比显示
• 支持拖动调整进度
• 基于 uni-app 原生 slider 实现拖动

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📧 联系方式

如有问题或建议，欢迎通过 Issue 反馈。