| | |
| | | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { |
| | | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; |
| | | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); |
| | | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; |
| | | return c > 3 && r && Object.defineProperty(target, key, r), r; |
| | | }; |
| | | import { SuperComponent, wxComponent } from '../common/src/index'; |
| | | import config from '../common/config'; |
| | | import props from './props'; |
| | | import { unitConvert } from '../common/utils'; |
| | | const { prefix } = config; |
| | | const name = `${prefix}-pull-down-refresh`; |
| | | let PullDownRefresh = class PullDownRefresh extends SuperComponent { |
| | | constructor() { |
| | | super(...arguments); |
| | | this.pixelRatio = 1; |
| | | this.startPoint = null; |
| | | this.isPulling = false; |
| | | this.loadingBarHeight = 100; |
| | | this.maxRefreshAnimateTimeFlag = 0; |
| | | this.closingAnimateTimeFlag = 0; |
| | | this.externalClasses = [`${prefix}-class`, `${prefix}-class-loading`, `${prefix}-class-text`, `${prefix}-class-indicator`]; |
| | | this.options = { |
| | | multipleSlots: true, |
| | | }; |
| | | this.relations = { |
| | | '../back-top/back-top': { |
| | | type: 'descendant', |
| | | }, |
| | | }; |
| | | this.properties = props; |
| | | this.data = { |
| | | prefix, |
| | | classPrefix: name, |
| | | barHeight: 0, |
| | | refreshStatus: -1, |
| | | loosing: false, |
| | | enableToRefresh: true, |
| | | scrollTop: 0, |
| | | }; |
| | | this.lifetimes = { |
| | | attached() { |
| | | const { screenWidth } = wx.getSystemInfoSync(); |
| | | const { loadingBarHeight, loadingTexts } = this.properties; |
| | | this.setData({ |
| | | loadingTexts: Array.isArray(loadingTexts) && loadingTexts.length >= 4 |
| | | ? loadingTexts |
| | | : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'], |
| | | }); |
| | | this.pixelRatio = 750 / screenWidth; |
| | | Object.defineProperty(this, 'maxBarHeight', { |
| | | get() { |
| | | return unitConvert(this.data.maxBarHeight); |
| | | }, |
| | | }); |
| | | Object.defineProperty(this, 'loadingBarHeight', { |
| | | get() { |
| | | return unitConvert(this.data.loadingBarHeight); |
| | | }, |
| | | }); |
| | | if (loadingBarHeight) { |
| | | this.setData({ |
| | | computedLoadingBarHeight: unitConvert(loadingBarHeight), |
| | | }); |
| | | } |
| | | }, |
| | | detached() { |
| | | clearTimeout(this.maxRefreshAnimateTimeFlag); |
| | | clearTimeout(this.closingAnimateTimeFlag); |
| | | }, |
| | | }; |
| | | this.observers = { |
| | | value(val) { |
| | | if (!val) { |
| | | clearTimeout(this.maxRefreshAnimateTimeFlag); |
| | | if (this.data.refreshStatus > 0) { |
| | | this.setData({ |
| | | refreshStatus: 3, |
| | | }); |
| | | } |
| | | this.setData({ barHeight: 0 }); |
| | | } |
| | | else { |
| | | this.doRefresh(); |
| | | } |
| | | }, |
| | | }; |
| | | this.methods = { |
| | | onScrollToBottom() { |
| | | this.triggerEvent('scrolltolower'); |
| | | }, |
| | | onScrollToTop() { |
| | | this.setData({ |
| | | enableToRefresh: true, |
| | | }); |
| | | }, |
| | | onScroll(e) { |
| | | const { scrollTop } = e.detail; |
| | | this.setData({ |
| | | enableToRefresh: scrollTop === 0, |
| | | }); |
| | | this.triggerEvent('scroll', { scrollTop }); |
| | | }, |
| | | onTouchStart(e) { |
| | | if (this.isPulling || !this.data.enableToRefresh) |
| | | return; |
| | | const { touches } = e; |
| | | if (touches.length !== 1) |
| | | return; |
| | | const { pageX, pageY } = touches[0]; |
| | | this.setData({ loosing: false }); |
| | | this.startPoint = { pageX, pageY }; |
| | | this.isPulling = true; |
| | | }, |
| | | onTouchMove(e) { |
| | | if (!this.startPoint) |
| | | return; |
| | | const { touches } = e; |
| | | if (touches.length !== 1) |
| | | return; |
| | | const { pageY } = touches[0]; |
| | | const offset = pageY - this.startPoint.pageY; |
| | | if (offset > 0) { |
| | | this.setRefreshBarHeight(offset); |
| | | } |
| | | }, |
| | | onTouchEnd(e) { |
| | | if (!this.startPoint) |
| | | return; |
| | | const { changedTouches } = e; |
| | | if (changedTouches.length !== 1) |
| | | return; |
| | | const { pageY } = changedTouches[0]; |
| | | const barHeight = pageY - this.startPoint.pageY; |
| | | this.startPoint = null; |
| | | this.isPulling = false; |
| | | this.setData({ loosing: true }); |
| | | if (barHeight > this.loadingBarHeight) { |
| | | this._trigger('change', { value: true }); |
| | | this.triggerEvent('refresh'); |
| | | } |
| | | else { |
| | | this.setData({ barHeight: 0 }); |
| | | } |
| | | }, |
| | | doRefresh() { |
| | | this.setData({ |
| | | barHeight: this.loadingBarHeight, |
| | | refreshStatus: 2, |
| | | loosing: true, |
| | | }); |
| | | this.maxRefreshAnimateTimeFlag = setTimeout(() => { |
| | | this.maxRefreshAnimateTimeFlag = null; |
| | | if (this.data.refreshStatus === 2) { |
| | | this.triggerEvent('timeout'); |
| | | this._trigger('change', { value: false }); |
| | | } |
| | | }, this.properties.refreshTimeout); |
| | | }, |
| | | setRefreshBarHeight(value) { |
| | | const barHeight = Math.min(value, this.maxBarHeight); |
| | | const data = { barHeight }; |
| | | if (barHeight >= this.loadingBarHeight) { |
| | | data.refreshStatus = 1; |
| | | } |
| | | else { |
| | | data.refreshStatus = 0; |
| | | } |
| | | return new Promise((resolve) => { |
| | | this.setData(data, () => resolve(barHeight)); |
| | | }); |
| | | }, |
| | | setScrollTop(scrollTop) { |
| | | this.setData({ scrollTop }); |
| | | }, |
| | | scrollToTop() { |
| | | this.setScrollTop(0); |
| | | }, |
| | | }; |
| | | } |
| | | }; |
| | | PullDownRefresh = __decorate([ |
| | | wxComponent() |
| | | ], PullDownRefresh); |
| | | export default PullDownRefresh; |
| | | import{__decorate}from"tslib";import{getObserver}from"../common/wechat";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getRect,systemInfo,unitConvert}from"../common/utils";import{canUseProxyScrollView}from"../common/version";const{prefix:prefix}=config,name=`${prefix}-pull-down-refresh`,defaultLoadingTexts=["下拉刷新","松手刷新","正在刷新","刷新完成"];let PullDownRefresh=class extends SuperComponent{constructor(){super(...arguments),this.pixelRatio=1,this.startPoint=null,this.isPulling=!1,this.maxRefreshAnimateTimeFlag=0,this.closingAnimateTimeFlag=0,this.refreshStatusTimer=null,this.externalClasses=[`${prefix}-class`,`${prefix}-class-loading`,`${prefix}-class-text`,`${prefix}-class-indicator`],this.behaviors=canUseProxyScrollView()?["wx://proxy-scroll-view"]:[],this.options={multipleSlots:!0,pureDataPattern:/^_/},this.relations={"../back-top/back-top":{type:"descendant"}},this.properties=props,this.data={prefix:prefix,classPrefix:name,distanceTop:0,barHeight:0,tipsHeight:0,refreshStatus:-1,loosing:!1,enableToRefresh:!0,scrollTop:0,_maxBarHeight:0,_loadingBarHeight:0},this.lifetimes={attached(){const{screenWidth:t}=systemInfo,{loadingTexts:e,maxBarHeight:s,loadingBarHeight:i}=this.properties,r=Array.isArray(e)&&e.length>=4;this.setData({_maxBarHeight:unitConvert(s),_loadingBarHeight:unitConvert(i),loadingTexts:r?e:defaultLoadingTexts}),this.pixelRatio=750/t,this.updateDistanceTop()},detached(){clearTimeout(this.maxRefreshAnimateTimeFlag),clearTimeout(this.closingAnimateTimeFlag),this.resetTimer()}},this.observers={value(t){t?this.doRefresh():(clearTimeout(this.maxRefreshAnimateTimeFlag),this.data.refreshStatus>0&&this.setData({refreshStatus:3}),this.setData({barHeight:0}))},barHeight(t){this.resetTimer(),0===t&&-1!==this.data.refreshStatus&&(this.refreshStatusTimer=setTimeout(()=>{this.setData({refreshStatus:-1})},240)),this.setData({tipsHeight:Math.min(t,this.data._loadingBarHeight)})},maxBarHeight(t){this.setData({_maxBarHeight:unitConvert(t)})},loadingBarHeight(t){this.setData({_loadingBarHeight:unitConvert(t)})}},this.methods={updateDistanceTop(){const t=t=>{this.setData({distanceTop:t})};getRect(this,`.${name}`).then(e=>{e.top?t(e.top):getObserver(this,`.${name}`).then(e=>{e.intersectionRatio>0&&t(e.boundingClientRect.top)})})},resetTimer(){this.refreshStatusTimer&&(clearTimeout(this.refreshStatusTimer),this.refreshStatusTimer=null)},onScrollToBottom(){this.triggerEvent("scrolltolower")},onScrollToTop(){this.setData({enableToRefresh:!0})},onScroll(t){const{scrollTop:e}=t.detail;this.setData({enableToRefresh:0===e}),this.triggerEvent("scroll",{scrollTop:e})},onTouchStart(t){if(this.isPulling||!this.data.enableToRefresh||this.properties.disabled)return;const{touches:e}=t;if(1!==e.length)return;const{pageX:s,pageY:i}=e[0];this.setData({loosing:!1}),this.startPoint={pageX:s,pageY:i},this.isPulling=!0},onTouchMove(t){if(!this.startPoint||this.properties.disabled)return;const{touches:e}=t;if(1!==e.length)return;const{pageY:s}=e[0],i=s-this.startPoint.pageY;i>0&&this.setRefreshBarHeight(i)},onTouchEnd(t){if(!this.startPoint||this.properties.disabled)return;const{changedTouches:e}=t;if(1!==e.length)return;const{pageY:s}=e[0],i=s-this.startPoint.pageY;this.startPoint=null,this.isPulling=!1,this.setData({loosing:!0}),i>this.data._loadingBarHeight?(this._trigger("change",{value:!0}),this.triggerEvent("refresh")):this.setData({barHeight:0})},onDragStart(t){const{scrollTop:e,scrollLeft:s}=t.detail;this.triggerEvent("dragstart",{scrollTop:e,scrollLeft:s})},onDragging(t){const{scrollTop:e,scrollLeft:s}=t.detail;this.triggerEvent("dragging",{scrollTop:e,scrollLeft:s})},onDragEnd(t){const{scrollTop:e,scrollLeft:s}=t.detail;this.triggerEvent("dragend",{scrollTop:e,scrollLeft:s})},doRefresh(){this.properties.disabled||(this.setData({barHeight:this.data._loadingBarHeight,refreshStatus:2,loosing:!0}),this.maxRefreshAnimateTimeFlag=setTimeout(()=>{this.maxRefreshAnimateTimeFlag=null,2===this.data.refreshStatus&&(this.triggerEvent("timeout"),this._trigger("change",{value:!1}))},this.properties.refreshTimeout))},setRefreshBarHeight(t){const e=Math.min(t,this.data._maxBarHeight),s={barHeight:e};return e>=this.data._loadingBarHeight?s.refreshStatus=1:s.refreshStatus=0,new Promise(t=>{this.setData(s,()=>t(e))})},setScrollTop(t){this.setData({scrollTop:t})},scrollToTop(){this.setScrollTop(0)}}}};PullDownRefresh=__decorate([wxComponent()],PullDownRefresh);export default PullDownRefresh; |