komomoo/vue-slim-better-scroll

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

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

2. 引入

• 插件形式全局引入

// 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)

• 组件形式引入

// *.vue 中
import Scroll from 'vue-slim-better-scroll'
export default {
  /* ... */
  components: {
    Scroll,
  },
  /* ... */
}

3. 使用它，请参考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

vue-slim-better-scroll's Issues

下拉刷新动画不复位

下拉刷新，当数据还没返回时把页面向上滑，然后动画就一直显示出来了

滚动开始前无效， bug?

源代码


文档

我的使用

有没有什么办法更改上拉加载的loading?

有没有什么办法更改上拉加载的loading?

文档 Events pullingUp 写错了吧.

https://wannaxiao.github.io/vue-slim-better-scroll/docs/dist/#events

触发时机：在一次下拉刷新的动作后.
不应该是 在一次上拉加载的动作后 么.

Indicator加载框被遮挡

页面加入scroll后,Indicator.open('加载中')被遮挡,显示在最底层,但是使用Toast正常,这是什么原因?

全局引入没有反应

全局引入组件上拉下拉没反应。
在vue页面中引入组件可以正常使用。
只改变了引入方式，为什么效果会不同。

有没有横向滚动的demo?

vue-slim-better-scroll怎么支持vue ssr

【问题】vue缓存后，不能滚动

1. 进入页面，下拉一定的距离并且加载一些数据
2. 在app.vue中缓存过
3. 在单击进入详情页面
4. 返回在当前滚动页面，你会发现，滚不动。哈哈哈哈

禁用下拉刷新报错

版本

1.2.0

代码

<Scroll ref="scroll" :pullDown="false"> </Scroll>

源码中
this.pullDownInitTop = parseInt(getComputedStyle(this.$refs.pulldown).top) || -50
当pullDown禁用的时候getComputedStyle参数非'Element'

鼠标滚动

目前这个不支持鼠标滚动？

每次获取数据我都得给个高度

我切换路由，然后获取数据，每次都得计算一个高度出来，不然滚动不了

有长列表虚拟列表的功能吗

有长列表虚拟列表的功能吗

为什么我的滚不了.....

一个小问题

上拉的时候，能不能做到松开手之后再刷新，我发现上拉之后，下面会直接刷新，我的项目用了这个插件，现在就是如果一直下拉不放，那么他就一直在刷新数据，这样感觉不太好，希望可以松开手指之后再刷新

为什么在使用时必须给高度才能上拉和下拉?

为什么在使用时必须给高度才能上拉和下拉?虽然better-scroll.js设计时必须给父容器设置高度才能生效，但我觉得在编写vue组件高度应该在vue组件内部解决，如果要外部去计算那就很麻烦了

如何 与 vue-awesome-swiper 结合使用

vuecli3 仿头条，
axios 读数据
swiper 左右滑动列表
每个列表都可以下拉刷新

发现一个问题 就是滚动在聊天中不是实时的 滚动到最新的一条 如图

麻烦看下谢谢 真的 就是我发的最新的消息他不会立马呈现而是呈现的是上一条信息 不知道为什么 麻烦看下谢谢

vuetify tabs 移动端不生效

在 pc 端运行无问题
在移动端 tabs 无法正常切换
https://codepen.io/datahoe/pen/jOGEwoN

在第一页的时候可以上拉

我不清楚这个是什么原因造成的

在第一页内容的时候并且下面也没有内容了 出来了上拉加载这几个字

hello 为什么我用initScroll这个方法会报错啊

[Feature Request] pullUpConfig 能否提供支持 图片

希望 能 支持 img ，能支持 HTML 标签内容,默认null; 如果同时设置了img, 则优先取img

可否提供一个水平滑动的示例？

可否提供一个水平滑动的示例？

必须刷新一次才可以生效，博主这是啥问题可以解答一下吗

1.4 scrollToBottom 报错

升级到1.4发现使用ScrollToBottom 直接报错

发现问题

发现问题：
1.下拉刷新时结束时，有时不会出现刷新成功字样。
2.发现下拉刷新时，有时会触发上拉加载功能，之前以为是我的代码有问题，下载源码后运行也发现了同样的问题。

没有滚动到底部就回弹了

没有使用下拉刷新，上拉刷新功能。 在下拉的时候 还没有拉到底部就自动回弹了 一直显示不出来最后一条数据