123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- 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, systemInfo } from '../common/utils';
- import useCustomNavbar from '../mixins/using-custom-navbar';
- 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.maxRefreshAnimateTimeFlag = 0;
- this.closingAnimateTimeFlag = 0;
- this.refreshStatusTimer = null;
- this.externalClasses = [`${prefix}-class`, `${prefix}-class-loading`, `${prefix}-class-text`, `${prefix}-class-indicator`];
- this.options = {
- multipleSlots: true,
- pureDataPattern: /^_/,
- };
- this.relations = {
- '../back-top/back-top': {
- type: 'descendant',
- },
- };
- this.properties = props;
- this.behaviors = [useCustomNavbar];
- this.data = {
- prefix,
- classPrefix: name,
- barHeight: 0,
- tipsHeight: 0,
- refreshStatus: -1,
- loosing: false,
- enableToRefresh: true,
- scrollTop: 0,
- _maxBarHeight: 0,
- _loadingBarHeight: 0,
- };
- this.lifetimes = {
- attached() {
- const { screenWidth } = systemInfo;
- const { loadingTexts, maxBarHeight, loadingBarHeight } = this.properties;
- this.setData({
- _maxBarHeight: unitConvert(maxBarHeight),
- _loadingBarHeight: unitConvert(loadingBarHeight),
- loadingTexts: Array.isArray(loadingTexts) && loadingTexts.length >= 4
- ? loadingTexts
- : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'],
- });
- this.pixelRatio = 750 / screenWidth;
- },
- detached() {
- clearTimeout(this.maxRefreshAnimateTimeFlag);
- clearTimeout(this.closingAnimateTimeFlag);
- this.resetTimer();
- },
- };
- 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();
- }
- },
- barHeight(val) {
- this.resetTimer();
- if (val === 0 && this.data.refreshStatus !== -1) {
- this.refreshStatusTimer = setTimeout(() => {
- this.setData({ refreshStatus: -1 });
- }, 240);
- }
- this.setData({ tipsHeight: Math.min(val, this.data._loadingBarHeight) });
- },
- maxBarHeight(v) {
- this.setData({ _maxBarHeight: unitConvert(v) });
- },
- loadingBarHeight(v) {
- this.setData({ _loadingBarHeight: unitConvert(v) });
- },
- };
- this.methods = {
- resetTimer() {
- if (this.refreshStatusTimer) {
- clearTimeout(this.refreshStatusTimer);
- this.refreshStatusTimer = null;
- }
- },
- 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 || this.properties.disabled)
- 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 || this.properties.disabled)
- 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 || this.properties.disabled)
- 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.data._loadingBarHeight) {
- this._trigger('change', { value: true });
- this.triggerEvent('refresh');
- }
- else {
- this.setData({ barHeight: 0 });
- }
- },
- onDragStart(e) {
- const { scrollTop, scrollLeft } = e.detail;
- this.triggerEvent('dragstart', { scrollTop, scrollLeft });
- },
- onDragging(e) {
- const { scrollTop, scrollLeft } = e.detail;
- this.triggerEvent('dragging', { scrollTop, scrollLeft });
- },
- onDragEnd(e) {
- const { scrollTop, scrollLeft } = e.detail;
- this.triggerEvent('dragend', { scrollTop, scrollLeft });
- },
- doRefresh() {
- if (this.properties.disabled)
- return;
- this.setData({
- barHeight: this.data._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.data._maxBarHeight);
- const data = { barHeight };
- if (barHeight >= this.data._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;
|