import { __decorate } from "tslib"; import { SuperComponent, wxComponent } from "../common/src/index"; import config from "../common/config"; import props from "./props"; import { getRect } from "../common/utils"; import { getObserver } from "../common/wechat"; let ARRAY = []; const { prefix } = config; const name = `${prefix}-swipe-cell`; const ContainerClass = `.${name}`; // 补充滑动阈值常量 const THRESHOLD = 0.5; let SwiperCell = class extends SuperComponent { constructor() { super(...arguments); this.externalClasses = [`${prefix}-class`]; this.options = { multipleSlots: true }; this.properties = props; this.data = { prefix: prefix, wrapperStyle: "", closed: true, classPrefix: name, skipMove: false, leftWidth: 0, rightWidth: 0, // 补充滑动状态管理 nv_state: { nv_direction: "", // vertical/horizontal nv_dragging: false, nv_startOffset: 0, nv_deltaX: 0, nv_offset: 0, nv_leftWidth: 0, nv_rightWidth: 0, nv_THRESHOLD: THRESHOLD, }, }; this.observers = { "left, right"() { this.setSwipeWidth(); }, }; this.lifetimes = { attached() { ARRAY.push(this); }, ready() { this.setSwipeWidth(); }, detached() { ARRAY = ARRAY.filter((e) => e !== this); }, }; // 声明事件处理方法(关键:暴露给模板调用) this.methods = { // 触摸开始:初始化滑动状态 nv_touchStart(nv_event) { const touch = nv_event.touches[0]; const { leftWidth, rightWidth } = this.data; const nv_state = { ...this.data.nv_state, nv_direction: "", nv_dragging: false, nv_startOffset: this.data.nv_state.nv_offset || 0, nv_deltaX: 0, nv_offset: this.data.nv_state.nv_offset || 0, nv_leftWidth: leftWidth, nv_rightWidth: rightWidth, nv_THRESHOLD: THRESHOLD, }; this.setData({ nv_state }); this.nv_state = nv_state; // 同步到实例属性 }, // 触摸移动:核心滑动逻辑(解决 touchmove 报错) nv_touchMove(nv_event) { const nv_ownerInstance = this; const nv_state = this.nv_state || this.data.nv_state; // 获取滑动偏移量 const touch = nv_event.touches[0]; nv_state.nv_deltaX = touch.clientX - (this.startX || touch.clientX); this.startX = touch.clientX; // 判断滑动方向 if (Math.abs(nv_state.nv_deltaX) > Math.abs(touch.clientY - (this.startY || touch.clientY))) { nv_state.nv_direction = "horizontal"; } else { nv_state.nv_direction = "vertical"; nv_ownerInstance.skipMove(); // 垂直滑动跳过 return; } // 水平滑动逻辑 if (nv_state.nv_direction !== "horizontal") return; if (!nv_state.nv_dragging) { nv_ownerInstance.triggerEvent("dragstart"); // 触发开始拖拽事件 } nv_state.nv_dragging = true; // 计算滑动偏移 const newOffset = nv_state.nv_startOffset + nv_state.nv_deltaX; nv_state.nv_offset = newOffset; // 限制滑动范围 this.nv_swipeMove(newOffset); this.setData({ nv_state }); return false; }, // 触摸结束:处理滑动收尾(解决 touchend 报错) nv_touchEnd() { const nv_ownerInstance = this; const nv_state = this.nv_state || this.data.nv_state; nv_state.nv_dragging = false; // 判断是否打开/关闭 if (nv_state.nv_rightWidth > 0 && -nv_state.nv_startOffset < nv_state.nv_rightWidth && -nv_state.nv_offset > nv_state.nv_rightWidth * nv_state.nv_THRESHOLD) { this.nv_open("right"); } else if (nv_state.nv_leftWidth > 0 && nv_state.nv_startOffset < nv_state.nv_leftWidth && nv_state.nv_offset > nv_state.nv_leftWidth * nv_state.nv_THRESHOLD) { this.nv_open("left"); } else { if (nv_state.nv_startOffset !== nv_state.nv_offset) { this.nv_close(); } } nv_ownerInstance.triggerEvent("dragend"); // 触发结束拖拽事件 this.setData({ nv_state }); }, // 滑动偏移处理 nv_swipeMove(offset) { const { leftWidth, rightWidth } = this.data; // 限制偏移范围:-rightWidth ≤ offset ≤ leftWidth const clampedOffset = Math.max(-rightWidth, Math.min(offset, leftWidth)); this.setData({ wrapperStyle: `transform: translateX(${clampedOffset}px); transition: none;`, }); }, // 打开侧滑 nv_open(direction) { const offset = direction === "left" ? this.data.leftWidth : -this.data.rightWidth; this.setData({ wrapperStyle: `transform: translateX(${offset}px); transition: transform 0.3s ease;`, nv_state: { ...this.data.nv_state, nv_offset: offset }, closed: false, }); this.triggerEvent("open", { direction }); }, // 关闭侧滑 nv_close() { this.setData({ wrapperStyle: `transform: translateX(0px); transition: transform 0.3s ease;`, nv_state: { ...this.data.nv_state, nv_offset: 0 }, closed: true, }); this.triggerEvent("close"); }, // 原有方法保留 setSwipeWidth() { Promise.all([ getRect(this, `${ContainerClass}__left`), getRect(this, `${ContainerClass}__right`), ]).then(([e, t]) => { if (e.width === 0 && t.width === 0 && !this._hasObserved) { this._hasObserved = true; getObserver(this, `.${name}`).then(() => { this.setSwipeWidth(); }); } this.setData({ leftWidth: e.width, rightWidth: t.width }); }); }, skipMove() { if (!this.data.skipMove) { this.setData({ skipMove: true }); } }, catchMove() { if (this.data.skipMove) { this.setData({ skipMove: false }); } }, open() { this.setData({ opened: true }); }, close() { this.setData({ opened: false }); }, closeOther() { ARRAY.filter((e) => e !== this).forEach((e) => e.close()); }, onTap() { this.close(); }, onActionTap(e) { const { currentTarget: { dataset: { action: t }, }, } = e; this.triggerEvent("click", t); }, }; } }; SwiperCell = __decorate([wxComponent()], SwiperCell); export default SwiperCell;