Nary a Package Missing

    vue-slim-better-scroll

    1.7.3 • Public • Published

    vue-slim-better-scroll

    开箱即用的/渐进式的 vue 移动端滚动组件/插件,基于better-scroll

    特性

    • 极简使用
      • 零配置/渐进式配置
      • 自动刷新滚动高度
    • 更优性能
      • 使用 transform 替代 position ,下拉刷新不再掉帧
    • 更好体验
      • 滚动内容小于滚动视口时,也可以滚动/回弹/下拉刷新/上拉加载
      • 多次下拉刷新节流
      • 多处细节改进
    • 更小体积
      • v1.5.0+ 使用 dio 构建,仅 25k (旧版本为 webpack 构建,体积 47k)
      • v1.6.0+ 抛弃 gif,使用 css 重构 Loading。体积近一步减小,仅 21k

    🐠 示例&文档

    Demo

    Demo 源码

    Demo2: 结合 vue-router

    Demo2 源码

    查看文档

    🚀 快速开始

    1. 安装
    yarn add vue-slim-better-scroll # 或 npm i -S vue-slim-better-scroll
    1. 引入
    • 插件形式全局引入
    // 入口文件 main.js 中
    import Scroll from 'vue-slim-better-scroll'
    Vue.use(Scroll)
    • 组件形式引入
    // *.vue 中
    import Scroll from 'vue-slim-better-scroll'
    export default {
      /* ... */
      components: {
        Scroll,
      },
      /* ... */
    }
    1. 使用它,请参考Demo 源码
    <!-- 简单场景 -->
    <Scroll
      ref="scroll"
      :autoUpdate="true"
      @pullingDown="loadRefresh"
      @pullingUp="loadMore">
        <!-- 滚动的内容 -->
    </Scroll>
    
    <!-- 复杂场景 -->
    <Scroll
      ref="scroll"
      :updateData="[data]"
      :refreshData="[]"
      @pullingDown="loadRefresh"
      @pullingUp="loadMore">
        <!-- 滚动的内容 -->
    </Scroll>

    查看完整文档


    源码在 src/ 目录下,注释完善。整个项目结构简洁,构建、eslint、babel 都拆分为独立模块,是一个可供学习的标准项目。

    😉😘 如果它对你有所帮助,可以点一下 ⭐️Star ~

    License

    MIT

    Copyright (c) 2018-present, komo

    Install

    npm i vue-slim-better-scroll

    DownloadsWeekly Downloads

    5

    Version

    1.7.3

    License

    MIT

    Unpacked Size

    10.6 MB

    Total Files

    46

    Last publish

    Collaborators

    • momoko