我的书签
添加书签
移除书签
Scroller
安装
局部注册
全局注册
import { Scroller } from 'vux'export default {components: {Scroller}}
// 在入口文件全局引入import Vue from 'vue'import { Scroller } from 'vux'Vue.component('scroller', Scroller)
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。建议使用第三方相关组件，相关 issue 将不会处理。
Scroller的内容必须是一个div，并且只能有一个divScroller 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。默认高度为整个视口高度，如果你加了x-header，那么你需要减去一个x-header的高度: height="-46"
请确保在你的数据更新后进行reset操作(参考下面文档)，如果你做了reset还有问题再开issue并附上代码，否则将绝对不会被处理。
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | object | 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus | — | |
| height | string | viewport height | 容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如height="-40" | — |
| lock-x | boolean | false | 锁定X方向 | — |
| lock-y | boolean | false | 锁定Y方向 | — |
| scrollbar-x | boolean | false | 是否显示横向滚动条 | — |
| scrollbarY | boolean | false | 是否显示垂直方向滚动条 | — |
| bounce | boolean | true | 是否显示边缘回弹效果 | — |
| use-pulldown | boolean | false | 是否使用下拉组件 | — |
| use-pullup | boolean | false | 是否使用上拉组件 | — |
| pulldown-config | object | see below | 下拉组件配置 | — |
| pullup-config | object | see below | 上拉组件配置 | — |
| scroll-bottom-offset | number | 0 | 在距离底部多长距离时触发事件 on-scroll-bottom | v2.2.1-rc.6 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-scroll | (position) | 容器滚动时触发，参数为top和left位置 | — |
| @on-scroll-bottom | — | 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值 | v2.2.1-rc.6 |
| @on-pulldown-loading | — | 用户触发下拉刷新状态，监听该事件以获取加载新数据 | — |
| @on-pullup-loading | — | 用户触发上拉加载状态，监听该事件以加载新数据 | — |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | scroller 内容，必须是一个 div 元素 | — |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| reset | (position, duration, easing) | 在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n) | |
| donePullup | 设置上拉刷新操作完成，在数据加载后执行 | ||
| disablePullup | 禁用上拉刷新，在没有更多数据时执行 | ||
| enablePullup | 启用上拉刷新插件 | ||
| donePulldown | 设置下拉刷新操作完成，在数据加载后执行 |
相关 issue
- #2740 [Bug Report] swiper no content found
- #2688 [Bug Report] xcroll
- #2308 Scroller组件 可以事件触发下拉刷新吗？
- #2305 Scroller文档的建议,非维护
- #2304 scroller在图片列表情况下有时显示不全,最底部看不到
- #2006 使用scoller在transition中使用问题
- #1895 scroller 组件滚动不了，滚动后会弹回初始状态
- #1879 scroller上拉加载两次
- #1857 VUX的Scroller插件水平滚动的时候整个屏幕上下不能滚动怎么解决
- #1419 Scorller在一个列表里用div包起图片不计算图片高度
- #1414 scroller中点击事件会触发两次
- #1382 scroller 刷新后上拉出现警告，且有时会出现拉不动的情况
- #1364 scroller 组件中的a标签会失效问题?
- #1353 请问有把上拉、下拉刷新组件单独出来的计划吗？解放scroller组件
- #1344 Scroller控件横向滚动时，触摸点在Scroller的内容时整个网页不能上下滚动
- #1284 scroller控件在安卓模拟上点击失效。
- #1280 scroller 出现的问题
- #1240 scroller下拉刷新为了正常回到顶部，可以有个过渡效果吗
- #1222 scroller 中 tap 事件传播导致双击问题
- #1187 scroller 滚动时跳转控制台报错
- #1175 组件scroller
- #1106 scroller在列表滚动过程中容易点到a标签的链接进行页面跳转
- #1100 scroller 组件左右滑动与HTML滚动条冲突
- #1097 Scroller + XImg 只能显示第一屏的图片
- #1058 scroller在bounce为false情况下不能pulldown
- #1047 x-img scroller 的两个小状况，不知道是不是bug
- #957 vux的scroller部分属性没有立即更新问题
- #933 组件scroller的事件on-scroll不响应（官网的例子）
- #908 scroller的onscroll问题
- #901 引用Scroller组件，首次加载组件，在created调用请求服务端获取数据，从服务端加载数据填充完后Scroller内置的滚动条拉不下去，下拉刷新请求多一次数据或者跳转到另一个路由再重新跳回来才可以下拉得了。
贡献者
该组件(包含文档)迭代次数 32，贡献人数 4
luhfairylandLinHaobinlichunqiang
发布日志
- v2.6.1 [change] 在
updated钩子中调用reset - v2.2.1-rc.8 [change] prop:prevent-default 默认设为 false
- v2.2.1-rc.6 [feature] 支持滚动到底部时触发事件 on-scroll-bottom
- v2.2.1-rc.6 [fix] 禁止点击事件触发，修复 pc 上触发两次的问题
- v2.2.1-rc.4 [feature] 支持在滚回顶部时设置时间和缓动 #1240
- v2.2.0 [fix] 修复 resize 事件没有移除导致切换页面报错 #1183
- v2.2.0 [fix] 修复滚动情况下跳转页面报错 #1187
