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; +}