解决当前页面加载时切换页面导致回退问题(#37)
This commit is contained in:
Aicirou
parent
5819a35751
commit
0f0a7d3644
5
package-lock.json
generated
5
package-lock.json
generated
@ -12538,11 +12538,6 @@
|
||||
"resolved": "https://registry.npm.taobao.org/vue-infinite-loading/download/vue-infinite-loading-2.4.5.tgz",
|
||||
"integrity": "sha1-zCD9QK9/IBiABkQ8mbYEcM8d4bM="
|
||||
},
|
||||
"vue-infinite-scroll": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
|
||||
"integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
|
||||
},
|
||||
"vue-lazyload": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz",
|
||||
|
||||
@ -30,7 +30,6 @@
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-i18n": "^8.17.3",
|
||||
"vue-infinite-loading": "^2.4.5",
|
||||
"vue-infinite-scroll": "^2.0.2",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuex": "^3.4.0"
|
||||
|
||||
@ -11,7 +11,6 @@ import i18n from "./i18n";
|
||||
// store
|
||||
import store from "@/store/index";
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
import infiniteScroll from "vue-infinite-scroll";
|
||||
import VueLazyload from "vue-lazyload";
|
||||
import Viewer from "v-viewer";
|
||||
import cdnpath from "./libs/util.cdn";
|
||||
@ -27,7 +26,6 @@ Vue.use(ElementUI);
|
||||
Vue.use(VueAxios, axios);
|
||||
Vue.use(cdnpath);
|
||||
Vue.use(VueClipboard);
|
||||
Vue.use(infiniteScroll);
|
||||
Vue.use(VueLazyload, {
|
||||
loading: cdnpath("/images/airplane.gif"),
|
||||
});
|
||||
|
||||
@ -23,16 +23,16 @@ Vue.use(VueRouter);
|
||||
// 导出路由 在 main.js 里使用
|
||||
const router = new VueRouter({
|
||||
mode: "history",
|
||||
// scrollBehavior(to, from, savePosition) {
|
||||
// if (savePosition) {
|
||||
// return savePosition;
|
||||
// } else {
|
||||
// return {
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// };
|
||||
// }
|
||||
// },
|
||||
scrollBehavior(to, from, savePosition) {
|
||||
if (savePosition) {
|
||||
return savePosition;
|
||||
} else {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
routes,
|
||||
});
|
||||
|
||||
|
||||
@ -4,33 +4,28 @@ export default {
|
||||
cancelToken: [],
|
||||
},
|
||||
actions: {
|
||||
push({
|
||||
commit
|
||||
}, cancelToken) {
|
||||
return new Promise(resolve => {
|
||||
push({ commit }, cancelToken) {
|
||||
return new Promise((resolve) => {
|
||||
commit("push", cancelToken);
|
||||
resolve()
|
||||
})
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
cancel({
|
||||
commit
|
||||
}) {
|
||||
return new Promise(resolve => {
|
||||
cancel({ commit }) {
|
||||
return new Promise((resolve) => {
|
||||
commit("clear");
|
||||
resolve()
|
||||
})
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
push(state, cancelToken) {
|
||||
state.cancelToken.push(cancelToken)
|
||||
state.cancelToken.push(cancelToken);
|
||||
},
|
||||
clear(state) {
|
||||
console.log(state.cancelToken)
|
||||
state.cancelToken.forEach(cancel => {
|
||||
cancel('路由跳转取消请求');
|
||||
state.cancelToken.forEach((cancel) => {
|
||||
cancel();
|
||||
});
|
||||
state.cancelToken = [];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd>
|
||||
<div
|
||||
class="golist"
|
||||
v-loading="loading"
|
||||
v-infinite-scroll="pageLoad"
|
||||
infinite-scroll-disabled="busy"
|
||||
infinite-scroll-distance="10"
|
||||
>
|
||||
<div class="golist" v-loading="loading">
|
||||
<list-view
|
||||
:data="files"
|
||||
v-if="mode === 'list'"
|
||||
@ -23,14 +17,19 @@
|
||||
:action="action"
|
||||
:thum="thum"
|
||||
/>
|
||||
<!-- <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading> -->
|
||||
<div v-show="files.length === 0" class="has-text-centered no-content"></div>
|
||||
<center>
|
||||
<div :class="!busy ? 'is-hidden' : ''">
|
||||
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</center>
|
||||
<infinite-loading
|
||||
v-show="!loading"
|
||||
ref="infinite"
|
||||
spinner="bubbles"
|
||||
@infinite="infiniteHandler"
|
||||
>
|
||||
<div slot="no-more"></div>
|
||||
<div slot="no-results"></div>
|
||||
</infinite-loading>
|
||||
<div
|
||||
v-show="files.length === 0"
|
||||
class="has-text-centered no-content"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="is-divider"
|
||||
@ -38,7 +37,10 @@
|
||||
$t('list.total') + ' ' + files.length + ' ' + $t('list.item')
|
||||
"
|
||||
></div>
|
||||
<readmemd :option="readmemd" v-if="renderReadMeMD && readmemd.display"></readmemd>
|
||||
<readmemd
|
||||
:option="readmemd"
|
||||
v-if="renderReadMeMD && readmemd.display"
|
||||
></readmemd>
|
||||
|
||||
<viewer
|
||||
v-if="viewer && images && images.length > 0"
|
||||
@ -69,23 +71,22 @@ import {
|
||||
checkExtends,
|
||||
} from "@utils/AcrouUtil";
|
||||
import { mapState } from "vuex";
|
||||
import InfiniteLoading from "vue-infinite-loading";
|
||||
import ListView from "./components/list";
|
||||
import GridView from "./components/grid";
|
||||
import Markdown from "../common/Markdown";
|
||||
import InfiniteLoading from "vue-infinite-loading";
|
||||
export default {
|
||||
name: "GoList",
|
||||
components: {
|
||||
InfiniteLoading,
|
||||
ListView,
|
||||
GridView,
|
||||
Headmd: Markdown,
|
||||
Readmemd: Markdown,
|
||||
InfiniteLoading,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
infiniteId: +new Date(),
|
||||
busy: false,
|
||||
loading: true,
|
||||
page: {
|
||||
page_token: null,
|
||||
@ -125,7 +126,7 @@ export default {
|
||||
computed: {
|
||||
...mapState("acrou/view", ["mode"]),
|
||||
images() {
|
||||
return this.buildFiles.filter(
|
||||
return this.files.filter(
|
||||
(file) => file.mimeType.indexOf("image") != -1
|
||||
);
|
||||
},
|
||||
@ -140,24 +141,15 @@ export default {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
pageLoad () {
|
||||
if (!this.page.page_token) return;
|
||||
this.page.page_index++;
|
||||
console.log("滚动加载了", this.page.page_index, this.$route.path);
|
||||
this.render("scroll");
|
||||
},
|
||||
infiniteHandler($state) {
|
||||
// TODO 异步请求的原因，导致数据响应在下个页面。需要终止上次请求
|
||||
// 首次进入页面不执行滚动事件
|
||||
if (!this.page.page_token) {
|
||||
return;
|
||||
}
|
||||
this.page.page_index++;
|
||||
console.log("滚动加载了", this.page.page_index, this.$route.path);
|
||||
this.render($state);
|
||||
},
|
||||
render (scroll) {
|
||||
if (scroll) {
|
||||
this.busy = true;
|
||||
} else {
|
||||
this.loading = true;
|
||||
}
|
||||
render($state) {
|
||||
this.headmd = { display: false, file: {}, path: "" };
|
||||
this.readmemd = { display: false, file: {}, path: "" };
|
||||
var path = this.$route.path;
|
||||
@ -184,8 +176,8 @@ export default {
|
||||
page_token: body.nextPageToken,
|
||||
page_index: body.curPageIndex,
|
||||
};
|
||||
if (scroll) {
|
||||
this.files = this.buildFiles(this.files.concat(data.files));
|
||||
if ($state) {
|
||||
this.files.push(...this.buildFiles(data.files));
|
||||
} else {
|
||||
this.files = this.buildFiles(data.files);
|
||||
}
|
||||
@ -193,18 +185,15 @@ export default {
|
||||
this.renderMd(data.files, path);
|
||||
}
|
||||
}
|
||||
// if (body.nextPageToken) {
|
||||
// $state.loaded();
|
||||
// } else {
|
||||
// $state.complete();
|
||||
// }
|
||||
if (body.nextPageToken) {
|
||||
this.$refs.infinite.stateChanger.loaded();
|
||||
} else {
|
||||
this.$refs.infinite.stateChanger.complete();
|
||||
}
|
||||
this.loading = false;
|
||||
this.busy = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
// $state.loaded();
|
||||
this.loading = false;
|
||||
this.busy = false;
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
@ -244,7 +233,6 @@ export default {
|
||||
},
|
||||
copy(path) {
|
||||
let origin = window.location.origin;
|
||||
console.log(path);
|
||||
path = origin + encodeURI(path);
|
||||
this.$copyText(path)
|
||||
.then(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user