| 1 |
- {"version":3,"sources":["../src/pull-down-refresh/pull-down-refresh.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAe,MAAM,qBAAqB,CAAC;AAQlE,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,cAAc;IACzD,aAAa,UAAQ;IAErB,UAAU,SAAK;IAEf,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAQ;IAE3D,SAAS,UAAS;IAElB,gBAAgB,SAAK;IAErB,YAAY,SAAO;IAInB,gBAAgB,SAAO;IAEvB,cAAc,SAAQ;IAEtB,wCAAwC;IACxC,kBAAkB,SAAK;IAEvB,0CAA0C;IAC1C,4BAA4B,SAAK;IAEjC,wCAAwC;IACxC,yBAAyB,SAAK;IAE9B,yBAAyB;IACzB,sBAAsB,SAAK;IAE3B,eAAe,WAAuE;IAEtF,OAAO;;MAEL;IAEF,UAAU,0CAAS;IAEnB,IAAI;;;;;;MAMF;IAEF,QAAQ;IAuBR,QAAQ;IAIR,YAAY,CAAC,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAAe;IAK3D,gBAAgB;IAChB,aAAa;IAOb,YAAY,CAAC,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAAe;IAW3D,WAAW,CAAC,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAAe;IAoB1D,UAAU,CAAC,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAAe;IAyDzD,KAAK,CAAC,CAAC,EAAE,MAAM;IAIf,IAAI,CAAC,CAAC,EAAE,MAAM;IAId,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAcvD,KAAK;CAeN","file":"pull-down-refresh.d.ts","sourcesContent":["/* eslint-disable dot-notation */\n/* eslint-disable prefer-destructuring */\nimport { SuperComponent, wxComponent } from '../common/src/index';\nimport config from '../common/config';\nimport props from './props';\n\nconst { prefix } = config;\nconst name = `${prefix}-pull-down-refresh`;\n\n@wxComponent()\nexport default class PullDownRefresh extends SuperComponent {\n isScrollToTop = true;\n\n pixelRatio = 1; // 像素比(rpx与px在此设备上的比值)\n\n startPoint: { pageX: number; pageY: number } | null = null; // 下拉开始的起点，主要用于计算下拉高度\n\n isPulling = false; // 是否下拉中\n\n defaultBarHeight = 0; // 下拉效果的默认高度\n\n maxBarHeight = 276; // 最大下拉高度，单位 rpx\n\n // 触发刷新的下拉高度，单位rpx\n // 松开时下拉高度大于这个值即会触发刷新，触发刷新后松开，会恢复到这个高度并保持，直到刷新结束\n loadingBarHeight = 200;\n\n refreshTimeout = 3000; // 刷新超时时间，超过没有回调刷新成功，会自动结束刷新动画。单位 ms\n\n /** 开始刷新 - 刷新成功/失败 最小间隔时间setTimeout句柄 */\n minRefreshTimeFlag = 0;\n\n /** 刷新成功/失败 - 关闭刷新动画 最小间隔时间setTimeout句柄 */\n minRefreshStatusShowTimeFlag = 0;\n\n /** 开始刷新 - 刷新成功/失败 最大间隔时间setTimeout句柄 */\n maxRefreshAnimateTimeFlag = 0;\n\n /** 关闭动画耗时setTimeout句柄 */\n closingAnimateTimeFlag = 0;\n\n externalClasses = ['t--class', 't-class-loading', 't-class-tex', 't-class-indicator'];\n\n options = {\n multipleSlots: true,\n };\n\n properties = props;\n\n data = {\n classPrefix: name,\n barHeight: this.defaultBarHeight,\n refreshStatus: 0, // 0-未开始，1释放可刷新，2-刷新中，3-刷新成功，4-结束中\n refreshTypes: ['not-start', 'wait-start', 'refreshing', 'success', 'finishing'],\n rotate: 0, // 旋转角度，refreshStatus为0、1时根据下拉距离动态计算得出\n };\n\n attached() {\n const systemInfo = wx.getSystemInfoSync();\n // 计算像素比\n this.screenWidth = systemInfo.screenWidth;\n this.pixelRatio = 750 / systemInfo.screenWidth;\n // 判断是否ios\n this.ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);\n\n // 自定义拉下宽度\n const maxBarHeight = this.properties.maxBarHeight as any as number;\n if (maxBarHeight) {\n this.maxBarHeight = maxBarHeight;\n }\n const loadingBarHeight = this.properties.loadingBarHeight as any as number;\n if (loadingBarHeight) {\n this.loadingBarHeight = loadingBarHeight;\n }\n const refreshTimeout = this.properties.refreshTimeout as any as number;\n if (refreshTimeout) {\n this.refreshTimeout = refreshTimeout;\n }\n }\n\n detached() {\n this.cleanTimeFlag();\n }\n\n onPageScroll(e: WechatMiniprogram.Component.TrivialInstance) {\n const { scrollTop } = e;\n this.isScrollToTop = scrollTop === 0;\n }\n\n /** 清理timeout */\n cleanTimeFlag() {\n clearTimeout(this.minRefreshTimeFlag);\n clearTimeout(this.minRefreshStatusShowTimeFlag);\n clearTimeout(this.maxRefreshAnimateTimeFlag);\n clearTimeout(this.closingAnimateTimeFlag);\n }\n\n onTouchStart(e: WechatMiniprogram.Component.TrivialInstance) {\n // 如果页面没滚动到顶部，不做处理\n // 如果下拉效果没有结束，不做处理\n if (!this.isScrollToTop || this.isPulling) return;\n const { touches } = e;\n if (touches.length !== 1) return;\n const { pageX, pageY } = touches[0];\n this.startPoint = { pageX, pageY }; // 设置起点\n this.isPulling = true; // 进入下拉状态\n }\n\n onTouchMove(e: WechatMiniprogram.Component.TrivialInstance) {\n // 如果页面没滚到顶部，不做处理\n // 如果没有起点，不做处理\n if (!this.isScrollToTop || !this.startPoint) return;\n const { touches } = e;\n if (touches.length !== 1) return;\n const { pageY } = touches[0];\n const offset = pageY - this.startPoint.pageY;\n const barHeight = this.toRpx(offset);\n if (barHeight > 0) {\n if (barHeight > this.maxBarHeight) {\n // 限高\n this.setRefreshBarHeight(this.maxBarHeight);\n this.startPoint.pageY = pageY - this.toPx(this.maxBarHeight); // 限高的同时修正起点，避免触摸点上移时无效果\n } else {\n this.setRefreshBarHeight(barHeight);\n }\n }\n }\n\n onTouchEnd(e: WechatMiniprogram.Component.TrivialInstance) {\n // 如果没有起点，不做处理\n if (!this.startPoint) return;\n const { changedTouches } = e;\n if (changedTouches.length !== 1) return;\n const { pageY } = changedTouches[0];\n const barHeight = this.toRpx(pageY - this.startPoint.pageY);\n this.startPoint = null; // 清掉起点，之后将忽略touchMove、touchEnd事件\n // 松开时高度超过阈值则触发刷新\n if (barHeight > this.loadingBarHeight) {\n this.setData({\n barHeight: this.loadingBarHeight,\n rotate: 0,\n refreshStatus: 2,\n }); // 正在刷新\n const startTime = Date.now();\n const callback = () => {\n // 正在刷新效果至少持续1秒钟\n const remainTime = 1000 - (Date.now() - startTime);\n this.minRefreshTimeFlag = setTimeout(\n () => {\n // 清理自身timeout\n this.minRefreshTimeFlag = 0;\n // 如果还没超时\n if (this.maxRefreshAnimateTimeFlag) {\n // 清理超时setup\n clearTimeout(this.maxRefreshAnimateTimeFlag);\n this.maxRefreshAnimateTimeFlag = 0;\n\n // 执行成功状态展示\n this.setData({ refreshStatus: 3 }); // 刷新成功\n this.minRefreshStatusShowTimeFlag = setTimeout(() => {\n this.minRefreshStatusShowTimeFlag = 0;\n\n this.close();\n }, 1000) as any as number; // 刷新成功展示持续一段时间后再结束\n }\n },\n remainTime > 0 ? remainTime : 0,\n ) as any as number;\n };\n this.triggerEvent('refresh', { callback });\n this.maxRefreshAnimateTimeFlag = setTimeout(() => {\n // 清理自身timeout\n this.maxRefreshAnimateTimeFlag = 0;\n\n if (this.data.refreshStatus === 2) {\n // 超时回调\n this.triggerEvent('timeout');\n this.close(); // 超时仍未被回调，则直接结束下拉\n }\n }, this.refreshTimeout) as any as number;\n } else {\n this.close();\n }\n }\n\n toRpx(v: number) {\n return v * this.pixelRatio;\n }\n\n toPx(v: number) {\n return v / this.pixelRatio;\n }\n\n setRefreshBarHeight(barHeight: number): Promise<number> {\n const data: Record<string, any> = { barHeight };\n if (barHeight >= this.loadingBarHeight) {\n data.refreshStatus = 1;\n data.rotate = -720; // 大于正常高度后不再旋转\n } else {\n data.refreshStatus = 0;\n data.rotate = (barHeight / this.loadingBarHeight) * -720; // 小于正常高度时随下拉高度旋转720度\n }\n return new Promise((resolve) => {\n this.setData(data, () => resolve(barHeight));\n });\n }\n\n close() {\n this.setData({ barHeight: this.defaultBarHeight, refreshStatus: 4 }); // 结束下拉\n this.closingAnimateTimeFlag = setTimeout(() => {\n // 清理自身timeout\n this.closingAnimateTimeFlag = 0;\n\n if (this.minRefreshStatusShowTimeFlag) {\n clearTimeout(this.minRefreshStatusShowTimeFlag);\n this.minRefreshStatusShowTimeFlag = 0;\n }\n\n this.setData({ refreshStatus: 0 });\n this.isPulling = false; // 退出下拉状态\n }, 1000) as any as number;\n }\n}\n"]}
|
