mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: remove deprecated vant-waterfall (#9203)
This commit is contained in:
neverland
GitHub
parent
5852b80a17
commit
1376c56743
@ -1,97 +0,0 @@
|
|||||||
# Waterfall 瀑布流
|
|
||||||
|
|
||||||
Tips: Waterfall 组件已废弃，请使用 List 组件代替。
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
#### NPM
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm i @vant/waterfall -S
|
|
||||||
```
|
|
||||||
|
|
||||||
#### YARN
|
|
||||||
|
|
||||||
```shell
|
|
||||||
yarn add @vant/waterfall
|
|
||||||
```
|
|
||||||
|
|
||||||
### 使用指南
|
|
||||||
|
|
||||||
#### 全局注册
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import Waterfall from '@vant/waterfall';
|
|
||||||
|
|
||||||
Vue.use(Waterfall);
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 局部注册
|
|
||||||
|
|
||||||
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Waterfall from '@vant/waterfall';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
directives: {
|
|
||||||
WaterfallLower: Waterfall('lower'),
|
|
||||||
WaterfallUpper: Waterfall('upper'),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 代码演示
|
|
||||||
|
|
||||||
#### 基础用法
|
|
||||||
|
|
||||||
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
|
|
||||||
|
|
||||||
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ul
|
|
||||||
v-waterfall-lower="loadMore"
|
|
||||||
waterfall-disabled="disabled"
|
|
||||||
waterfall-offset="400"
|
|
||||||
>
|
|
||||||
<li v-for="item in list">{{ item }}</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
||||||
disabled: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
directives: {
|
|
||||||
WaterfallLower: Waterfall('lower'),
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
loadMore() {
|
|
||||||
this.disabled = true;
|
|
||||||
setTimeout(() => {
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
this.list.push(this.list.length);
|
|
||||||
}
|
|
||||||
this.disabled = false;
|
|
||||||
}, 200);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### API
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | _Function_ | - | - |
|
|
||||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | _Function_ | - | - |
|
|
||||||
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | _string_ | - | - |
|
|
||||||
| waterfall-offset | 触发瀑布流加载的阈值 | _number_ | `300` | - |
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: ['@babel/env'],
|
|
||||||
};
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@vant/waterfall",
|
|
||||||
"version": "1.0.2",
|
|
||||||
"description": "vant waterfall component",
|
|
||||||
"main": "lib/index.js",
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"build": "npx babel src --out-dir lib",
|
|
||||||
"release": "npm run build && npm publish"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-waterfall",
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/cli": "^7.8.4",
|
|
||||||
"@babel/core": "^7.9.0",
|
|
||||||
"@babel/preset-env": "^7.9.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
import { on, off } from './event';
|
|
||||||
import {
|
|
||||||
getScrollTop,
|
|
||||||
getElementTop,
|
|
||||||
getVisibleHeight,
|
|
||||||
getScrollEventTarget,
|
|
||||||
} from './scroll';
|
|
||||||
|
|
||||||
const CONTEXT = '@@Waterfall';
|
|
||||||
const OFFSET = 300;
|
|
||||||
|
|
||||||
// 处理滚动函数
|
|
||||||
function handleScrollEvent() {
|
|
||||||
const element = this.el;
|
|
||||||
const { scrollEventTarget } = this;
|
|
||||||
// 已被禁止的滚动处理
|
|
||||||
if (this.disabled) return;
|
|
||||||
|
|
||||||
const targetScrollTop = getScrollTop(scrollEventTarget);
|
|
||||||
const targetVisibleHeight = getVisibleHeight(scrollEventTarget);
|
|
||||||
// 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
|
|
||||||
const targetBottom = targetScrollTop + targetVisibleHeight;
|
|
||||||
|
|
||||||
// 如果无元素高度，考虑为元素隐藏，直接返回
|
|
||||||
if (!targetVisibleHeight) return;
|
|
||||||
|
|
||||||
// 判断是否到了底
|
|
||||||
let needLoadMoreToLower = false;
|
|
||||||
if (element === scrollEventTarget) {
|
|
||||||
needLoadMoreToLower =
|
|
||||||
scrollEventTarget.scrollHeight - targetBottom < this.offset;
|
|
||||||
} else {
|
|
||||||
const elementBottom =
|
|
||||||
getElementTop(element) -
|
|
||||||
getElementTop(scrollEventTarget) +
|
|
||||||
getVisibleHeight(element);
|
|
||||||
needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
|
|
||||||
}
|
|
||||||
if (needLoadMoreToLower) {
|
|
||||||
this.cb.lower &&
|
|
||||||
this.cb.lower({ target: scrollEventTarget, top: targetScrollTop });
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断是否到了顶
|
|
||||||
let needLoadMoreToUpper = false;
|
|
||||||
if (element === scrollEventTarget) {
|
|
||||||
needLoadMoreToUpper = targetScrollTop < this.offset;
|
|
||||||
} else {
|
|
||||||
const elementTop =
|
|
||||||
getElementTop(element) - getElementTop(scrollEventTarget);
|
|
||||||
needLoadMoreToUpper = elementTop + this.offset > 0;
|
|
||||||
}
|
|
||||||
if (needLoadMoreToUpper) {
|
|
||||||
this.cb.upper &&
|
|
||||||
this.cb.upper({ target: scrollEventTarget, top: targetScrollTop });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 绑定事件到元素上
|
|
||||||
// 读取基本的控制变量
|
|
||||||
function doBindEvent() {
|
|
||||||
if (this.el[CONTEXT].binded) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.el[CONTEXT].binded = true;
|
|
||||||
|
|
||||||
this.scrollEventListener = handleScrollEvent.bind(this);
|
|
||||||
this.scrollEventTarget = getScrollEventTarget(this.el);
|
|
||||||
|
|
||||||
const disabledExpr = this.el.getAttribute('waterfall-disabled');
|
|
||||||
let disabled = false;
|
|
||||||
if (disabledExpr) {
|
|
||||||
this.vm.$watch(disabledExpr, (value) => {
|
|
||||||
this.disabled = value;
|
|
||||||
this.scrollEventListener();
|
|
||||||
});
|
|
||||||
disabled = Boolean(this.vm[disabledExpr]);
|
|
||||||
}
|
|
||||||
this.disabled = disabled;
|
|
||||||
|
|
||||||
const offset = this.el.getAttribute('waterfall-offset');
|
|
||||||
this.offset = Number(offset) || OFFSET;
|
|
||||||
|
|
||||||
on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
|
|
||||||
|
|
||||||
this.scrollEventListener();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 绑定事件
|
|
||||||
function startBind(el) {
|
|
||||||
const context = el[CONTEXT];
|
|
||||||
|
|
||||||
context.vm.$nextTick(() => {
|
|
||||||
doBindEvent.call(el[CONTEXT]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认何时绑事件监听函数
|
|
||||||
function doCheckStartBind(el) {
|
|
||||||
const context = el[CONTEXT];
|
|
||||||
|
|
||||||
if (context.vm._isMounted) {
|
|
||||||
startBind(el);
|
|
||||||
} else {
|
|
||||||
context.vm.$on('hook:mounted', () => {
|
|
||||||
startBind(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function (type) {
|
|
||||||
return {
|
|
||||||
bind(el, binding, vnode) {
|
|
||||||
if (!el[CONTEXT]) {
|
|
||||||
el[CONTEXT] = {
|
|
||||||
el,
|
|
||||||
vm: vnode.context,
|
|
||||||
cb: {},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
el[CONTEXT].cb[type] = binding.value;
|
|
||||||
|
|
||||||
doCheckStartBind(el);
|
|
||||||
},
|
|
||||||
|
|
||||||
update(el) {
|
|
||||||
const context = el[CONTEXT];
|
|
||||||
context.scrollEventListener && context.scrollEventListener();
|
|
||||||
},
|
|
||||||
|
|
||||||
unbind(el) {
|
|
||||||
const context = el[CONTEXT];
|
|
||||||
if (context.scrollEventTarget) {
|
|
||||||
off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
// eslint-disable-next-line import/no-mutable-exports
|
|
||||||
export let supportsPassive = false;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const opts = {};
|
|
||||||
Object.defineProperty(opts, 'passive', {
|
|
||||||
// eslint-disable-next-line getter-return
|
|
||||||
get() {
|
|
||||||
/* istanbul ignore next */
|
|
||||||
supportsPassive = true;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
window.addEventListener('test-passive', null, opts);
|
|
||||||
// eslint-disable-next-line no-empty
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
export function on(target, event, handler, passive = false) {
|
|
||||||
target.addEventListener(
|
|
||||||
event,
|
|
||||||
handler,
|
|
||||||
supportsPassive ? { capture: false, passive } : false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function off(target, event, handler) {
|
|
||||||
target.removeEventListener(event, handler);
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import Waterfall from './directive';
|
|
||||||
|
|
||||||
Waterfall.install = function(Vue) {
|
|
||||||
Vue.directive('WaterfallLower', Waterfall('lower'));
|
|
||||||
Vue.directive('WaterfallUpper', Waterfall('upper'));
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Waterfall;
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
// get nearest scroll element
|
|
||||||
// http://w3help.org/zh-cn/causes/SD9013
|
|
||||||
// http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
|
||||||
export function getScrollEventTarget(element, rootParent = window) {
|
|
||||||
let node = element;
|
|
||||||
while (
|
|
||||||
node &&
|
|
||||||
node.tagName !== 'HTML' &&
|
|
||||||
node.tagName !== 'BODY' &&
|
|
||||||
node.nodeType === 1 &&
|
|
||||||
node !== rootParent
|
|
||||||
) {
|
|
||||||
const { overflowY } = window.getComputedStyle(node);
|
|
||||||
if (overflowY === 'scroll' || overflowY === 'auto') {
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
node = node.parentNode;
|
|
||||||
}
|
|
||||||
return rootParent;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getScrollTop(element) {
|
|
||||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
|
||||||
}
|
|
||||||
|
|
||||||
// get distance from element top to page top
|
|
||||||
export function getElementTop(element) {
|
|
||||||
return (
|
|
||||||
(element === window ? 0 : element.getBoundingClientRect().top) +
|
|
||||||
getScrollTop(window)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getVisibleHeight(element) {
|
|
||||||
return element === window
|
|
||||||
? element.innerHeight
|
|
||||||
: element.getBoundingClientRect().height;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user