From 40e77afc5c713782df4e4c6ddc5940378f1ab516 Mon Sep 17 00:00:00 2001 From: Zhiting Lin Date: Thu, 29 Oct 2020 11:07:03 +0800 Subject: [PATCH] update inifnite scroll responsive page. --- package.json | 1 - src/popup.js | 3 - src/prompt.js | 3 - src/views/assetList.vue | 147 +++++++++++++++++++--------------------------- src/views/delayTxList.vue | 123 ++++++++++---------------------------- 5 files changed, 90 insertions(+), 187 deletions(-) diff --git a/package.json b/package.json index d0ebff5..3c3ed06 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "vue-loading-overlay": "^3.0.1", "vue-router": "^3.0.2", "vuelidate": "^0.7.5", - "vuescroll": "^4.16.1", "vuex": "^3.1.1" }, "browserslist": [ diff --git a/src/popup.js b/src/popup.js index 54e2394..4f73f0c 100644 --- a/src/popup.js +++ b/src/popup.js @@ -3,9 +3,7 @@ import moment from 'moment' import VueI18n from 'vue-i18n' import VueRouter from 'vue-router' import Loading from 'vue-loading-overlay' -import vuescroll from 'vuescroll/dist/vuescroll-native' import 'vue-loading-overlay/dist/vue-loading.css' -import 'vuescroll/dist/vuescroll.css' import InfiniteLoading from 'vue-infinite-loading'; import Routers from './router' @@ -47,7 +45,6 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => { Vue.use(Vuelidate) Vue.use(InfiniteLoading) Vue.use(i18n) - Vue.use(vuescroll) Vue.use(VueRouter) Vue.use(MenuPage) Vue.use(SelectionPage) diff --git a/src/prompt.js b/src/prompt.js index e389f50..27fd979 100644 --- a/src/prompt.js +++ b/src/prompt.js @@ -3,9 +3,7 @@ import moment from 'moment' import VueI18n from 'vue-i18n' import VueRouter from 'vue-router' import Loading from 'vue-loading-overlay' -import vuescroll from 'vuescroll/dist/vuescroll-native' import 'vue-loading-overlay/dist/vue-loading.css' -import 'vuescroll/dist/vuescroll.css' import InfiniteLoading from 'vue-infinite-loading'; import {store} from './store/store' @@ -45,7 +43,6 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => { Vue.use(Vuelidate) Vue.use(InfiniteLoading) Vue.use(i18n) - Vue.use(vuescroll) Vue.use(VueRouter) Vue.use(SelectionPage) Vue.use(Header) diff --git a/src/views/assetList.vue b/src/views/assetList.vue index b993b76..98430a7 100644 --- a/src/views/assetList.vue +++ b/src/views/assetList.vue @@ -5,8 +5,9 @@ .transactions { font-size: 15px; - height: 345px; - overflow: hidden; + height:calc(100% - 214px); + overflow: auto; + overscroll-behavior: contain; } .value{ @@ -117,43 +118,42 @@ font-size: 15px;
{{ $t('common.transfer_out') }}
-
-
- - - -
-
-
-
- {{$t('main.noRecord')}} +
+
+ +
@@ -185,6 +185,7 @@ export default { enterActive: EnterActive, leaveActive: LeaveActive, type:'all', + infiniteId: +new Date(), }; }, watch: { @@ -199,36 +200,6 @@ export default { this.enterActive = EnterActive this.leaveActive = LeaveActive }, - // 'currentAccount.balances'() { - // if(this.$refs['vs']){ - // this.$refs['vs'].scrollTo( - // { - // y: 0 - // }, - // 500, - // 'easeInQuad' - // ); - // } - // this.start = 0 - // this.refreshTransactions( this.start, limit, this.type).then(transactions => { - // this.transactions = transactions - // }); - // }, - type(newVale){ - if(this.$refs['vs']){ - this.$refs['vs'].scrollTo( - { - y: 0 - }, - 500, - 'easeInQuad' - ); - } - this.start = 0 - this.refreshTransactions( this.start, limit, newVale).then(transactions => { - this.transactions = transactions - }); - } }, computed: { address: function(){ @@ -291,25 +262,25 @@ export default { }, changeType: function (type) { this.type = type + this.start = 0 + this.infiniteId += 1; + this.transactions = [] }, - handleScroll(vertical, horizontal, nativeEvent) { - if (vertical.process == 0) { - this.start = 0; - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - this.transactions = transactions - }); - return; + infiniteHandler($state) { + if (this.transactions.length===0 || (this.transactions.length == (this.start)) ) { + this.refreshTransactions( this.start, limit, this.type).then(transactions => { + if (transactions.length) { + this.start = this.start + limit; + this.transactions.push(...transactions); + $state.loaded(); + }else{ + $state.complete(); } - - if ( (vertical.process == 1) && (this.transactions.length == (this.start+limit)) ) { - this.start = this.start + limit; - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - transactions.forEach(transaction => { - this.transactions.push(transaction); - }); - }); - } - }, + }); + }else { + $state.complete(); + } + }, refreshTransactions: function (start, limit, type) { return new Promise((resolve, reject) => { let type_txs @@ -418,9 +389,9 @@ export default { ]) }, mounted() { - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - this.transactions = transactions - }); + // this.refreshTransactions( this.start, limit, this.type).then(transactions => { + // this.transactions = transactions + // }); if(Object.keys(this.listVote).length == 0 && this.netType === 'vapor'){ query.chainStatus().then(resp => { if(resp){ diff --git a/src/views/delayTxList.vue b/src/views/delayTxList.vue index 950dc68..2a2112c 100644 --- a/src/views/delayTxList.vue +++ b/src/views/delayTxList.vue @@ -97,7 +97,7 @@ font-size: 15px; -
+
-
-
-
- {{$t('main.noRecord')}} -
-
+ @@ -156,7 +159,6 @@ export default { name: "", data() { return { - asset:null, transactions: [], maskShow: false, start: 0, @@ -178,36 +180,6 @@ export default { this.enterActive = EnterActive this.leaveActive = LeaveActive }, - // 'currentAccount.balances'() { - // if(this.$refs['vs']){ - // this.$refs['vs'].scrollTo( - // { - // y: 0 - // }, - // 500, - // 'easeInQuad' - // ); - // } - // this.start = 0 - // this.refreshTransactions( this.start, limit, this.type).then(transactions => { - // this.transactions = transactions - // }); - // }, - type(newVale){ - if(this.$refs['vs']){ - this.$refs['vs'].scrollTo( - { - y: 0 - }, - 500, - 'easeInQuad' - ); - } - this.start = 0 - this.refreshTransactions( this.start, limit, newVale).then(transactions => { - this.transactions = transactions - }); - } }, computed: { address: function(){ @@ -232,13 +204,15 @@ export default { }, methods: { infiniteHandler($state) { - if ((this.transactions.length == (this.start+limit)) ) { - this.start = this.start + limit; + if (this.transactions.length===0 || (this.transactions.length == (this.start)) ) { this.refreshTransactions( this.start, limit).then(transactions => { - transactions.forEach(transaction => { - this.transactions.push(transaction); + if (transactions.length) { + this.start = this.start + limit; + this.transactions.push(...transactions); $state.loaded(); - }); + }else{ + $state.complete(); + } }); }else { $state.complete(); @@ -271,53 +245,21 @@ export default { shortAddress: function (add) { return address.short(add) }, - formatCurrency: function (num) { - return Num.formatCurrency(num, this.currency) - }, - itemBalance: function(asset){ - if(asset.asset.assetId === BTM){ - return Num.formatNue(asset.balance,8) - }else{ - return asset.balance - } + refreshTransactions: function (start, limit) { + return new Promise((resolve, reject) => { - }, - changeType: function (type) { - this.type = type - }, - handleScroll(vertical, horizontal, nativeEvent) { - if (vertical.process == 0) { - this.start = 0; - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - this.transactions = transactions - }); - return; - } + transaction.listDelayTransaction(this.address, start, limit).then(transactions => { + if (transactions == null) { + return; + } - if ( (vertical.process == 1) && (this.transactions.length == (this.start+limit)) ) { - this.start = this.start + limit; - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - transactions.forEach(transaction => { - this.transactions.push(transaction); - }); - }); - } - }, - refreshTransactions: function (start, limit) { - return new Promise((resolve, reject) => { - - transaction.listDelayTransaction(this.address, start, limit).then(transactions => { - if (transactions == null) { - return; - } - - const formattedTx = this.transactionsFormat(transactions); - resolve(formattedTx) - }).catch(error => { - console.log(error); - reject(error) - }); - }) + const formattedTx = this.transactionsFormat(transactions); + resolve(formattedTx) + }).catch(error => { + console.log(error); + reject(error) + }); + }) }, countDays: function (lockUntil) { const blockDiff = lockUntil - this.currentBlockHeight ; @@ -369,9 +311,6 @@ export default { if(resp){ this.currentBlockHeight = resp.blockHeight; } - this.refreshTransactions( this.start, limit, this.type).then(transactions => { - this.transactions = transactions - }); }) }, }; -- 2.11.0