scroller

Scroller
- 安装
- 属性
- 事件
- 插槽
- 方法
- 相关 issue
- 贡献者
- 发布日志

Scroller

demo 原始链接demo 源码编辑文档组件源码

scroller - 图1

二维码

scroller - 图2

Install

安装

局部注册

全局注册

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并附上代码，否则将绝对不会被处理。

API

属性

名字	类型	默认值	说明	版本要求
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		设置下拉刷新操作完成，在数据加载后执行

Issues

发布日志

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

Scroller

安装

属性

事件

插槽

方法

相关 issue

贡献者

发布日志