diff --git a/package.json b/package.json index 529594fbe..9460ba95b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@antv/g6": "^4.3.6", "@babel/polyfill": "^7.12.1", "@better-scroll/core": "^2.5.1", + "@better-scroll/pull-down": "^2.5.1", "@better-scroll/pull-up": "^2.5.1", "@better-scroll/scroll-bar": "^2.5.1", "animate.css": "^4.1.1", diff --git a/src/components/hzwlComponents/phone/PhoneScroll.vue b/src/components/hzwlComponents/phone/PhoneScroll.vue index bb47a19bb..8cbd30c10 100644 --- a/src/components/hzwlComponents/phone/PhoneScroll.vue +++ b/src/components/hzwlComponents/phone/PhoneScroll.vue @@ -1,17 +1,50 @@ @@ -20,9 +53,11 @@ import BScroll from '@better-scroll/core' import ScrollBar from '@better-scroll/scroll-bar' import Pullup from '@better-scroll/pull-up' +import PullDown from '@better-scroll/pull-down' BScroll.use(ScrollBar) BScroll.use(Pullup) +BScroll.use(PullDown) export default { name: "PhoneScroll", @@ -37,10 +72,12 @@ export default { default: () => [], required: true }, - // 是否加载中 - loading: { - type: Boolean, - default: false, + page: { + type: Number, + required: true + }, + pageSize: { + type: Number, required: true }, // 总数 @@ -48,18 +85,46 @@ export default { type: Number, required: true }, - // 上拉加载回调 - pullingUpHandler: { + // 除上拉和下拉之外的loading + loading: { + type: Boolean, + default: false + }, + + // 是否开启上拉加载 + pullUpLoad: { + type: Boolean, + default: false + }, + // 是否开启下拉刷新 + pullDownRefresh: { + type: Boolean, + default: false + }, + + // 获取数据回调 返回值必须是Promise + getDataHandler: { type: Function, - default: () => { - console.log('请传入上拉加载回调函数参数pullingUpHandler') + default: (page) => { + console.log('请传入获取数据回调函数参数getDataHandler', page) + return Promise.resolve() } }, }, data () { return { bs: null, - toEnd: false + + // 下拉刷新 + pullDown: false, + isEnterThreshold: false, + isLeaveThreshold: false, + pullDownLoading: false, + + // 上拉加载 + pullUpLoading: false, + isShowAll: false, + isEmpty: false, } }, watch: { @@ -71,19 +136,36 @@ export default { refreshScroll () { this.$nextTick(() => { if (!this.bs) { + const pullUpLoad = this.pullUpLoad ? { + threshold: 200 + } : false + const pullDownRefresh = this.pullDownRefresh ? { + threshold: 50, + stop: 40 + } : false this.bs = new BScroll(this.$refs.scroll, { probeType: 3, scrollbar: true, - pullUpLoad: { - threshold: 50 - }, + pullUpLoad, + pullDownRefresh, click: true }) - this.bs && this.bs.on('pullingUp', () => { - this.pullingUpHandler() - // 结束上拉加载 - this.bs.finishPullUp() - }) + + if (this.pullUpLoad) { + this.bs.on('pullingUp', this.pullingUpHandler) + } + + if (this.pullDownRefresh) { + this.bs.on('pullingDown', this.pullingDownHandler) + + this.bs.on('enterThreshold', () => { + this.showPullDownText('isEnterThreshold') + }) + + this.bs.on('leaveThreshold', () => { + this.showPullDownText('isLeaveThreshold') + }) + } this.bs.on('scroll', ({x, y}) => { }) @@ -92,6 +174,56 @@ export default { } }) }, + + // 上拉加载回调 + async pullingUpHandler () { + if (this.page * this.pageSize <= this.total) { + this.pullUpLoading = true + // 从下一页获取数据 + await this.getDataHandler(this.page + 1) + this.pullUpLoading = false + } + this.showPullUpText() + // 结束上拉加载 + this.bs.finishPullUp() + }, + + // 下拉刷新回调 + async pullingDownHandler () { + this.showPullDownText('pullDownLoading') + + // 从第一页获取数据 + await this.getDataHandler(1) + + this.hidePullDownText() + // 结束下拉刷新 + this.bs.finishPullDown() + }, + + showPullUpText () { + this.isEmpty = false + this.isShowAll = false + if (this.data.length === 0) { + this.isEmpty = true + } else { + if (this.data.length >= this.total) { + this.isShowAll = true + } + } + }, + showPullDownText (key) { + this.isEnterThreshold = false + this.isLeaveThreshold = false + this.pullDownLoading = false + this[key] = true + this.pullDown = true + }, + hidePullDownText () { + this.isEnterThreshold = false + this.isLeaveThreshold = false + this.pullDownLoading = false + this.pullDown = false + }, scrollTo (x, y ,time, easing) { if (this.bs) { this.bs.scrollTo(x, y, time, easing) @@ -107,4 +239,24 @@ export default { overflow: hidden; position: relative; } + +.pageLoading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.pullDownText { + position: absolute; + text-align: center; + pointer-events: auto; + height: 40px; + line-height: 40px; + top: -40px; + width: 100%; + left: 0; + font-size: 12px; + color: #3170A8; +} diff --git a/src/pages/phone/domesticStand/index.vue b/src/pages/phone/domesticStand/index.vue index 0e597c8ed..de1706dbe 100644 --- a/src/pages/phone/domesticStand/index.vue +++ b/src/pages/phone/domesticStand/index.vue @@ -27,9 +27,13 @@ ref="scroll" height="calc(100vh - 100px)" :data="list" + :page="searchQuery.page" + :pageSize="searchQuery.pageSize" :total="total" :loading="loading" - :pullingUpHandler="pullingUpHandler"> + pullUpLoad + pullDownRefresh + :getDataHandler="getData">
{ - if (res.ok) { - this.total = res.data.count - - if (this.searchQuery.page === 1) { - this.list = res.data.list - } else { - this.list = [...this.list, ...res.data.list] - } + return new Promise((resolve, reject) => { + const config = { + _this: this, + loading: 'loading' } + if (page) { + this.searchQuery.page = page + } + this.$http._postData("search/searchCenter/searchSarBykey", this.searchQuery, config).then(res => { + if (res.ok) { + this.total = res.data.count + + if (this.searchQuery.page === 1) { + this.list = res.data.list + } else { + this.list = [...this.list, ...res.data.list] + } + } + }).finally(() => { + resolve() + }) }) }, onChoose () { diff --git a/src/pages/phone/standDynamics/components/DataCenter.vue b/src/pages/phone/standDynamics/components/DataCenter.vue index 78f3c9e22..090e5c156 100644 --- a/src/pages/phone/standDynamics/components/DataCenter.vue +++ b/src/pages/phone/standDynamics/components/DataCenter.vue @@ -6,9 +6,13 @@ + pullUpLoad + pullDownRefresh + :getDataHandler="getData">
@@ -57,12 +61,6 @@ export default { this.getData() }, methods: { - pullingUpHandler () { - if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) { - this.searchQuery.page = this.searchQuery.page + 1 - this.getData() - } - }, onOpen () { this.$refs.folderPopupRef.open(this.searchQuery.treeId || null) }, @@ -72,20 +70,27 @@ export default { this.searchQuery.page = 1 this.getData() }, - getData () { - const config = { - _this: this, - loading: 'loading' - } - this.$http._getData('fileMaterialCenter/file-material', this.searchQuery, config).then(res => { - if (res.ok) { - this.total = res.data.total - if (this.searchQuery.page === 1) { - this.list = res.data.records - } else { - this.list = [...this.list, ...res.data.records] - } + getData (page) { + return new Promise((resolve, reject) => { + const config = { + _this: this, + loading: 'loading' } + if (page) { + this.searchQuery.page = page + } + this.$http._getData('fileMaterialCenter/file-material', this.searchQuery, config).then(res => { + if (res.ok) { + this.total = res.data.total + if (this.searchQuery.page === 1) { + this.list = res.data.records + } else { + this.list = [...this.list, ...res.data.records] + } + } + }).finally(() => { + resolve() + }) }) }, jumpDetails(item) { diff --git a/src/pages/phone/standDynamics/components/StandardRegulations.vue b/src/pages/phone/standDynamics/components/StandardRegulations.vue index a073b65dd..fcb37b826 100644 --- a/src/pages/phone/standDynamics/components/StandardRegulations.vue +++ b/src/pages/phone/standDynamics/components/StandardRegulations.vue @@ -2,9 +2,13 @@ + pullUpLoad + pullDownRefresh + :getDataHandler="getData">
@@ -55,27 +59,28 @@ export default { this.getData() }, methods: { - pullingUpHandler () { - if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) { - this.searchQuery.page = this.searchQuery.page + 1 - this.getData() - } - }, - getData () { - const config = { - _this: this, - loading: 'loading' - } - this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => { - if (res.ok) { - this.total = res.data.total - - if (this.searchQuery.page === 1) { - this.list = res.data.records - } else { - this.list = [...this.list, ...res.data.records] - } + getData (page) { + return new Promise((resolve, reject) => { + const config = { + _this: this, + loading: 'loading' } + if (page) { + this.searchQuery.page = page + } + this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => { + if (res.ok) { + this.total = res.data.total + + if (this.searchQuery.page === 1) { + this.list = res.data.records + } else { + this.list = [...this.list, ...res.data.records] + } + } + }).finally(() => { + resolve() + }) }) }, getDicTypeListCode () { diff --git a/src/pages/phone/standDynamics/components/UnderResearchStandards.vue b/src/pages/phone/standDynamics/components/UnderResearchStandards.vue index ca3eec05a..82c122a4a 100644 --- a/src/pages/phone/standDynamics/components/UnderResearchStandards.vue +++ b/src/pages/phone/standDynamics/components/UnderResearchStandards.vue @@ -2,9 +2,13 @@ + pullUpLoad + pullDownRefresh + :getDataHandler="getData">
@@ -54,27 +58,28 @@ export default { this.getData() }, methods: { - pullingUpHandler () { - if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) { - this.searchQuery.page = this.searchQuery.page + 1 - this.getData() - } - }, - getData () { - const config = { - _this: this, - loading: 'loading' - } - this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => { - if (res.ok) { - this.total = res.data.total - - if (this.searchQuery.page === 1) { - this.list = res.data.records - } else { - this.list = [...this.list, ...res.data.records] - } + getData (page) { + return new Promise((resolve, reject) => { + const config = { + _this: this, + loading: 'loading' } + if (page) { + this.searchQuery.page = page + } + this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => { + if (res.ok) { + this.total = res.data.total + + if (this.searchQuery.page === 1) { + this.list = res.data.records + } else { + this.list = [...this.list, ...res.data.records] + } + } + }).finally(() => { + resolve() + }) }) }, getDicTypeListCode () { diff --git a/src/pages/phone/standDynamics/index.vue b/src/pages/phone/standDynamics/index.vue index 3ad0f0720..834847a84 100644 --- a/src/pages/phone/standDynamics/index.vue +++ b/src/pages/phone/standDynamics/index.vue @@ -8,13 +8,13 @@
- + - + - +
diff --git a/src/pages/processCenter/pages/creatProcess/qbrk/common/formEditList.vue b/src/pages/processCenter/pages/creatProcess/qbrk/common/formEditList.vue index a74463b07..47e7edc03 100644 --- a/src/pages/processCenter/pages/creatProcess/qbrk/common/formEditList.vue +++ b/src/pages/processCenter/pages/creatProcess/qbrk/common/formEditList.vue @@ -7,7 +7,7 @@ - + - +