komomoovue-slim-better-scroll
开箱即用的/渐进式的 vue 移动端滚动组件/插件，基于better-scroll
✨ 特性
- 极简使用
- 零配置/渐进式配置
- 自动刷新滚动高度
- 更优性能
- 使用 transform 替代 position ，下拉刷新不再掉帧
- 更好体验
- 滚动内容小于滚动视口时，也可以滚动/回弹/下拉刷新/上拉加载
- 多次下拉刷新节流
- 多处细节改进
- 更小体积
- v1.5.0+ 使用 dio 构建，仅 25k (旧版本为 webpack 构建，体积 47k)
- v1.6.0+ 抛弃 gif，使用 css 重构 Loading。体积近一步减小，仅 21k
🐠 示例&文档
🚀 快速开始
- 安装
yarn add vue-slim-better-scroll # 或 npm i -S vue-slim-better-scroll引入
插件形式全局引入
// 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)- 组件形式引入
// *.vue 中
import Scroll from 'vue-slim-better-scroll'
export default {
/* ... */
components: {
Scroll,
},
/* ... */
}- 使用它，请参考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
Copyright (c) 2018-present, komo