Vue無限スクロールローディング命令の実現方法
ローディングもありません。つまりスクロールバーがブラウザの底に到達したかどうかを判断します。着いたら事件を起こします。米が来たら処理しません。
計算式は簡単なものです。 ボトムは(0)= スクロールバーの高さ-スクロールバーの上の距離-可視高さ。 とにかく0です。
一、スクロールバーの位置を取得する
vueはbody元素にスクロールバーのイベントを結びつけてあげます。本当にTMD草の卵です。事件がお母さんに結び付けられたのは、事件を触発しないことです。何の幽霊か分かりません。
最後に直接ルートノードHTMLにスクロールイベントをバインドします。
締め括りをつける
以上述べたのは小编が皆さんに绍介したVue无限スクロールローディングの実现方法です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
計算式は簡単なものです。 ボトムは(0)= スクロールバーの高さ-スクロールバーの上の距離-可視高さ。 とにかく0です。
一、スクロールバーの位置を取得する
class Scroll {
static get top() {
return Math.max(document.documentElement.scrollTop || document.body.scrollTop);
}
static get clientHeight() {
return Math.max(document.documentElement.clientHeight || document.body.clientHeight);
}
static get clientWidth() {
return Math.max(document.documentElement.clientWidth || document.body.clientWidth);
}
static get height() {
return Math.max(document.documentElement.scrollHeight || document.body.scrollHeight);
}
static get width() {
return Math.max(document.documentElement.scrollWidth || document.body.scrollWidth);
}
static get bottom() {
return Scroll.height - Scroll.clientHeight - Scroll.top;
}
}
二、ルートノードにスクロールイベントをバインドするvueはbody元素にスクロールバーのイベントを結びつけてあげます。本当にTMD草の卵です。事件がお母さんに結び付けられたのは、事件を触発しないことです。何の幽霊か分かりません。
最後に直接ルートノードHTMLにスクロールイベントをバインドします。
const on = (function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
三、グローバルコマンドの登録
/**
*
*/
const downsampler = (function () {
let result = null;
return function (time, func) {
if (!result) {
result = setTimeout(function () {
func();
result = null;
}, time);
}
}
})();
Vue.directive("infinite-scroll", {
bind(el, binding, vnode) {
on(window, 'scroll', function () {
if (typeof binding.value === "function" && Scroll.bottom <= 50) { // 50
downsampler(50, binding.value); //
}
})
}
});
四、実例:
<div class="app" v-infinite-scroll="coupon">
<template v-for="item in goods">
<p>{{item}}</p>
</template>
</div>
let v = new Vue({
el: ".app",
data(){
return {
goods:[]
}
},
methods: {
coupon() {
this.goods.push(" ")
}
}
})
デモンストレーションアドレス:http://whnba.gitee.io/tkspa/締め括りをつける
以上述べたのは小编が皆さんに绍介したVue无限スクロールローディングの実现方法です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。