Giter Site home page Giter Site logo

yinyansi011014 / vue-slim-better-scroll Goto Github PK

View Code? Open in Web Editor NEW

This project forked from komomoo/vue-slim-better-scroll

0.0 0.0 0.0 6.08 MB

💇‍♀️ 简洁易用的/渐进式的 vue 移动端滚动组件,仿QQ的下拉刷新和上拉滚动无限加载体验

Home Page: https://wannaxiao.github.io/vue-slim-better-scroll/docs/dist/

License: MIT License

JavaScript 3.06% Vue 94.41% Shell 2.53%

vue-slim-better-scroll's Introduction

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, momoko

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.