https://github.com/komomoo/vue-slim-better-scroll
💇♀️ 简洁易用的/渐进式的 vue 移动端滚动组件，仿QQ的下拉刷新和上拉滚动无限加载体验
https://github.com/komomoo/vue-slim-better-scroll
better-scroll mobile-web vue vue-scroll vue-scroller
Last synced: 10 months ago
JSON representation
💇♀️ 简洁易用的/渐进式的 vue 移动端滚动组件，仿QQ的下拉刷新和上拉滚动无限加载体验
- Host: GitHub
- URL: https://github.com/komomoo/vue-slim-better-scroll
- Owner: komomoo
- License: mit
- Created: 2018-05-07T14:06:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-19T08:48:46.000Z (over 4 years ago)
- Last Synced: 2024-08-09T21:13:42.657Z (almost 2 years ago)
- Topics: better-scroll, mobile-web, vue, vue-scroll, vue-scroller
- Language: Vue
- Homepage: https://komomoo.github.io/vue-slim-better-scroll/docs/dist/
- Size: 6.34 MB
- Stars: 140
- Watchers: 2
- Forks: 26
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-slim-better-scroll
> 开箱即用的/渐进式的 vue 移动端滚动组件/插件，基于[better-scroll](https://github.com/ustbhuangyi/better-scroll)
## ✨ 特性
* **极简使用**
* 零配置/渐进式配置
* 自动刷新滚动高度
* **更优性能**
* 使用 transform 替代 position ，下拉刷新不再掉帧
* **更好体验**
* 滚动内容小于滚动视口时，也可以滚动/回弹/下拉刷新/上拉加载
* 多次下拉刷新节流
* 多处细节改进
* **更小体积**
* v1.5.0+ 使用 [dio](https://github.com/komomoo/dio) 构建，仅 25k (旧版本为 webpack 构建，体积 47k)
* v1.6.0+ 抛弃 gif，使用 css 重构 Loading。体积近一步减小，仅 21k
## 🐠 示例&文档
[Demo](https://komomoo.github.io/vue-slim-better-scroll/demo/default/dist/)
[Demo 源码](https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/default/App.vue)
[Demo2: 结合 vue-router](https://komomoo.github.io/vue-slim-better-scroll/demo/complex/dist/)
[Demo2 源码](https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/complex/)
[查看文档](https://komomoo.github.io/vue-slim-better-scroll/docs/dist/)
## 🚀 快速开始
1. 安装
```bash
yarn add vue-slim-better-scroll # 或 npm i -S vue-slim-better-scroll
```
2. 引入
* 插件形式全局引入
```js
// 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)
```
* 组件形式引入
```js
// *.vue 中
import Scroll from 'vue-slim-better-scroll'
export default {
/* ... */
components: {
Scroll,
},
/* ... */
}
```
3. 使用它，请参考[Demo 源码](https://github.com/komomoo/vue-slim-better-scroll/blob/master/demo/default/App.vue)
```html
```
[查看完整文档](https://komomoo.github.io/vue-slim-better-scroll/docs/dist/)
---
源码在 src/ 目录下，注释完善。整个项目结构简洁，构建、eslint、babel 都拆分为独立模块，是一个可供学习的标准项目。
😉😘 如果它对你有所帮助，可以点一下 ⭐️Star ~
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2018-present, komo