hae
Version:
Mobile web UI based on Vux
266 lines (237 loc) • 8.39 kB
YAML
category:
en: Deprecated
'zh-CN': 不再维护
category_order: 999
icon: ''
tags:
en:
- layout
- scroll
- scroller
zh-CN:
- 布局
- 滚动
extra: |
::: warning
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。
<br>
建议使用第三方相关组件，相关 issue 将不会处理。
:::
::: warning
`Scroller`的内容必须是一个`div`，并且只能有一个`div`
<br>
`Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。
<br>
<br>
默认高度为整个视口高度，如果你加了`x-header`，那么你需要减去一个`x-header`的高度: `height="-46"`
<br>
<br>
请确保在你的数据更新后进行`reset`操作(参考下面文档)，如果你做了`reset`还有问题再开`issue`并附上代码，否则将`绝对不会被处理`。
:::
after_extra: |
pulldown 默认配置:
``` js
{
content: 'Pull Down To Refresh',
height: 60,
autoRefresh: false,
downContent: 'Pull Down To Refresh',
upContent: 'Release To Refresh',
loadingContent: 'Loading...',
clsPrefix: 'xs-plugin-pulldown-'
}
```
pullup 默认配置:
``` js
{
content: 'Pull Up To Refresh',
pullUpHeight: 60,
height: 40,
autoRefresh: false,
downContent: 'Release To Refresh',
upContent: 'Pull Up To Refresh',
loadingContent: 'Loading...',
clsPrefix: 'xs-plugin-pullup-'
}
```
<span class="vux-qa">QA 如何更新数据</span>
如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可
``` js
this.$nextTick(() => {
this.$refs.scroller.reset()
})
```
如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况
``` js
this.$nextTick(() => {
this.$refs.scroller.reset({
top: 0
})
})
```
<span class="vux-qa">QA 如何设置pullup完成</span>
方法1，直接调用ref的`donePullup`方法
``` js
this.$refs.demo2.donePullup()
```
方法2，绑定value, 重置状态
::: tip
自定义pullup模板同样是用v-model来绑定以获取状态变化
:::
``` html
<scroller v-model="status"></scroller>
```
``` js
data () {
return {
status: {
pullupStatus: 'default'
}
}
}
```
```
// 重置状态为default
this.status.pullupStatus = 'default
```
<span class="vux-qa">QA 如何设置pulldown完成</span>
参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。
<span class="vux-qa">QA 如何禁用或者启用pullup</span>
在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`
反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`
<span class="vux-qa">启用keep-alive后滚动有问题</span>
需要在调用Scroller的页面上在 hook: `activated`上执行`reset`
``` js
activated () {
this.$refs.scroller.reset()
}
```
events:
on-scroll:
params: '`(position)`'
en: emits when user scrolls
zh-CN: '容器滚动时触发，参数为`top`和`left`位置'
on-scroll-bottom:
version: v2.2.1-rc.6
en: emits when user scrolls to bottom. The event may emit multiple times, so you should use a variable for keeping status if you need fetching data
zh-CN: 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值
on-pulldown-loading:
en: emits when scroller is on pulldown-loading status
zh-CN: 用户触发下拉刷新状态，监听该事件以获取加载新数据
on-pullup-loading:
en: emits when scroller is on pullup-loading status
zh-CN: 用户触发上拉加载状态，监听该事件以加载新数据
props:
value:
type: 'Object'
default: ''
en: current pulldown and pullup status, use `v-model` for binding
zh-CN: 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus
height:
type: String
default: 'viewport height'
en: "scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px`"
zh-CN: '容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如`height="-40"`'
lock-x:
type: Boolean
default: false
en: lock the horizontal direction
zh-CN: 锁定X方向
lock-y:
type: Boolean
default: false
en: lock the vertical direction
zh-CN: 锁定Y方向
scrollbar-x:
type: Boolean
default: false
en: if show horizontal scrollbar
zh-CN: 是否显示横向滚动条
scrollbarY:
type: Boolean
default: false
en: if show vertical scrollerbar
zh-CN: 是否显示垂直方向滚动条
bounce:
type: Boolean
default: true
en: if use bounce effect
zh-CN: 是否显示边缘回弹效果
use-pulldown:
type: Boolean
default: false
en: if use pulldown plugin
zh-CN: 是否使用下拉组件
use-pullup:
type: Boolean
default: false
en: if use pullup plugin
zh-CN: 是否使用上拉组件
pulldown-config:
type: Object
default: see below
en: config for pulldown plugin
zh-CN: 下拉组件配置
pullup-config:
type: Object
default: see below
en: config for pullup plugin
zh-CN: 上拉组件配置
scroll-bottom-offset:
version: v2.2.1-rc.6
type: Number
default: 0
en: where to emit event:on-scroll-bottom before reaching bottom
zh-CN: 在距离底部多长距离时触发事件 on-scroll-bottom
slots:
default:
en: scroller content, should has only one `div` root
zh-CN: scroller 内容，必须是一个 `div` 元素
methods:
reset:
params: '`(position, duration, easing)`'
en: 'reset scroller to reset height whenever your data is changed. easing can be one of ease-in, ease-in-out, ease, bezier(n, n, n, n)'
zh-CN: '在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n)'
donePullup:
en: set pullup done after new data is fetched
zh-CN: 设置上拉刷新操作完成，在数据加载后执行
disablePullup:
en: disable pullup plugin when there is no more data
zh-CN: 禁用上拉刷新，在没有更多数据时执行
enablePullup:
en: enable pullup plugin
zh-CN: 启用上拉刷新插件
donePulldown:
en: set pulldown done after new data is fetched
zh-CN: 设置下拉刷新操作完成，在数据加载后执行
changes:
v2.6.1:
en:
- '[change] call `reset` in `updated` hook'
zh-CN:
- '[change] 在`updated` 钩子中调用`reset`'
v2.2.1-rc.8:
en:
- '[change] set prop:prevent-default to false by default'
zh-CN:
- '[change] prop:prevent-default 默认设为 false'
v2.2.1-rc.6:
en:
- '[feature] Support event:on-scroll-bottom'
- '[fix] Disable trigger click'
zh-CN:
- '[feature] 支持滚动到底部时触发事件 on-scroll-bottom'
- '[fix] 禁止点击事件触发，修复 pc 上触发两次的问题'
v2.2.1-rc.4:
en:
- '[feature] Support duration and easing for reset function. #1240'
zh-CN:
- '[feature] 支持在滚回顶部时设置时间和缓动 #1240'
v2.2.0:
en:
- '[fix] Fix issue when redirecting on scrolling #1187'
- '[fix] Fix resize listener not being destroyed #1183'
zh-CN:
- '[fix] 修复 resize 事件没有移除导致切换页面报错 #1183'
- '[fix] 修复滚动情况下跳转页面报错 #1187'