-
- 付费节点，购买后方可查看原文详情
+
+ {
+export default Vue => {
const listenList = [];
const imageFileCatch = [];
const imageCatcheList = [];
@@ -46,10 +46,11 @@ export default (Vue, options = {}) => {
);
};
const isCanShow = item => {
- const { el, src, file, q = 40 } = item;
+ const { el, file, q = 40 } = item;
const isIMG = el.nodeName === "IMG";
if (checkInView(el)) {
let image = new Image();
+ el.classList.add("loading");
http.get(`/files/${file}?q=${q}&json=true`).then(({ data: { url } }) => {
image.src = url;
image.onload = () => {
@@ -58,9 +59,11 @@ export default (Vue, options = {}) => {
imageFileCatch.push(file);
imageCatcheList.push(url);
image = null;
+ el.classList.remove("loading");
};
image.onerror = () => {
listenList.remove(item);
+ el.classList.remove("loading");
};
});
return true;
diff --git a/src/components/common/svgIcon.vue b/src/components/common/svgIcon.vue
index 90ad64f5..7467f3a7 100644
--- a/src/components/common/svgIcon.vue
+++ b/src/components/common/svgIcon.vue
@@ -51,6 +51,12 @@
+
+
+
+
diff --git a/src/components/loadMore.vue b/src/components/loadMore.vue
index 2d56dfa8..5df7a258 100644
--- a/src/components/loadMore.vue
+++ b/src/components/loadMore.vue
@@ -1,6 +1,6 @@
@@ -26,15 +25,11 @@
- ↓
+ ↓
{{ status }}
-
-
+
+
@@ -76,29 +71,9 @@ const getScrollTarget = el => {
}
return document.documentElement;
};
-/**
- * 节流函数
- * @auth: jsonleex
- * @param {Function} fn
- * @param {Number} delay
- */
-function throttle(fn, delay, scrolling = () => {}) {
- let timer = null;
- return function(event) {
- if (scrolling instanceof Function) {
- scrolling(event);
- }
-
- const context = this;
- const args = arguments;
- clearTimeout(timer);
- timer = setTimeout(() => {
- fn.apply(context, args);
- }, delay);
- };
-}
+import _ from "lodash";
export default {
- name: "loadMore",
+ name: "load-more",
props: {
noTranslateAnimation: {
type: Boolean,
@@ -135,10 +110,6 @@ export default {
onLoadMore: {
type: Function,
default: null
- },
- scrolling: {
- type: Function,
- default: () => () => {}
}
},
data() {
@@ -190,7 +161,9 @@ export default {
},
watch: {
loading(val) {
- this.scEl.onscroll = val ? null : this.handleScrolling();
+ val
+ ? this.scEl.removeEventListener("scroll", this.handleScrolling)
+ : this.scEl.addEventListener("scroll", this.handleScrolling);
},
requesting(val) {
val || (this.dY = 0);
@@ -203,18 +176,14 @@ export default {
* @return {Function}
* @author Seven Du
*/
- handleScrolling() {
- const timeout = 300;
- const fn = () => {
- if (this.noMore) return;
- if (this.loading) return;
- if (!this.bottomReached()) return;
- // 加载...
- this.loading = true;
- this.onLoadMore();
- };
- return throttle(fn, timeout, this.scrolling);
- },
+ handleScrolling: _.throttle(function() {
+ if (this.noMore) return;
+ if (this.loading) return;
+ if (!this.bottomReached()) return;
+ // 加载...
+ this.loading = true;
+ this.onLoadMore();
+ }, 300),
bottomReached() {
const elBottom = this.$el.getBoundingClientRect().bottom;
return elBottom - this.visibleHeight <= this.distance && !this.loading;
@@ -300,31 +269,33 @@ export default {
this.dY = 0;
}
},
- // 过渡
- transitionEnd() {},
- // 初始化
- init() {
- this.$nextTick(() => {
- this.topBarHeight = this.$el.children[0].clientHeight;
- this.scrollTarget = getScrollTarget(this.$el);
- if (typeof this.onLoadMore === "function") {
- this.scEl.onscroll = this.handleScrolling();
- }
- if (this.canPulldown && !this.fulled()) {
- this.beforeRefresh();
- }
- });
+ bindEvent() {
+ if (typeof this.onLoadMore === "function") {
+ this.scEl.addEventListener("scroll", this.handleScrolling);
+ }
+ },
+ autoLoad() {
+ if (this.canPulldown && !this.fulled()) {
+ this.beforeRefresh();
+ }
}
},
- // 挂载时 触发一次刷新
+
mounted() {
- this.init();
+ this.scrollTarget = getScrollTarget(this.$el);
+ this.topBarHeight = this.$el.children[0].clientHeight;
+ this.bindEvent();
+
+ this.autoLoad();
+ },
+ activated() {
+ this.$nextTick(this.bindEvent);
},
deactivated() {
- this.scEl.onscroll = null;
+ this.scEl.removeEventListener("scroll", this.handleScrolling);
},
destroyed() {
- this.scEl.onscroll = null;
+ this.scEl.removeEventListener("scroll", this.handleScrolling);
}
};
diff --git a/src/components/pages/Topic.vue b/src/components/pages/Topic.vue
index 79fe9dd9..479f2010 100644
--- a/src/components/pages/Topic.vue
+++ b/src/components/pages/Topic.vue
@@ -76,7 +76,6 @@
:class="[classNameBuilder('questions')]"
:on-refresh="handleRefresh"
:on-load-more="handleLoadQuestions"
- :scrolling="handleScrolling"
>
{
- this.handleScrolling();
- };
- }
+ document.addEventListener("scroll", this.handleScrolling);
}
};
diff --git a/src/components/pswp.vue b/src/components/pswp.vue
index 6f61690f..58ab9750 100644
--- a/src/components/pswp.vue
+++ b/src/components/pswp.vue
@@ -82,7 +82,7 @@ export default {
checkImage() {
if (!this.photoswipe) return;
const currItem = this.photoswipe.currItem;
- const { paid_node, paid, amount, file, index } = currItem;
+ const { paid_node, paid, index } = currItem;
paid_node > 0 &&
(paid
? !currItem.updated && this.updateImage(index)
diff --git a/src/page/UserHome.vue b/src/page/UserHome.vue
index 46244c8f..0ea3e70b 100644
--- a/src/page/UserHome.vue
+++ b/src/page/UserHome.vue
@@ -21,7 +21,7 @@
- {{ user.name }}
+ {{ user.name }}