From da25434b85fc5b4321c429bf95e719d00ec395bb Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 11 Jan 2024 16:21:16 +0800 Subject: [PATCH] 定位优化 --- uni_modules/uview-ui/components/u-swipe-action-item/nvue.js | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 174 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js b/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js new file mode 100644 index 0000000..118e4cf --- /dev/null +++ b/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js @@ -0,0 +1,174 @@ +// nvue������dom���������������������dom��������������� +const dom = uni.requireNativePlugin('dom'); +const bindingX = uni.requireNativePlugin('bindingx'); +const animation = uni.requireNativePlugin('animation'); + +export default { + data() { + return { + // ������������������������ + buttonsWidth: 0, + // ��������������������� + moving: false + } + }, + computed: { + // ������������������ + getDuratin() { + let duration = String(this.duration) + // ������ms������������������ms��������������� + if (duration.indexOf('ms') >= 0) return parseInt(duration) + // ������s������������������������ms������������������������1000 + if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000 + // ���������������������������������30������������s������ + duration = Number(duration) + return duration < 30 ? duration * 1000 : duration + } + }, + watch: { + show(n) { + if(n) { + this.moveCellByAnimation('open') + } else { + this.moveCellByAnimation('close') + } + } + }, + mounted() { + this.initialize() + }, + methods: { + initialize() { + this.queryRect() + }, + // ��������������������������������������������������������������������������� + closeHandler() { + if(this.status === 'open') { + // ��������������������������������������������������������������������� + return this.moveCellByAnimation('close') && this.unbindBindingX() + } + }, + // ��������������� + clickHandler() { + // ������������������������������������������ + if(this.moving) return + // ������������������������������������ + this.parent && this.parent.closeOther(this) + if(this.status === 'open') { + // ��������������������������������������������������������������������� + return this.moveCellByAnimation('close') && this.unbindBindingX() + } + }, + // ��������������� + onTouchstart(e) { + // ������������������������������������disabled������������������ + if(this.moving || this.disabled) { + return this.unbindBindingX() + } + if(this.status === 'open') { + // ��������������������������������������������������������������������� + return this.moveCellByAnimation('close') && this.unbindBindingX() + } + // ������������������e������������������������ + e?.stopPropagation && e.stopPropagation() + e?.preventDefault && e.preventDefault() + this.moving = true + // ������������ref + const content = this.getContentRef() + let expression = `min(max(${-this.buttonsWidth}, x), 0)` + // ������������������������������������ + this.parent && this.parent.closeOther(this) + + // ������������KPI������������BindingX + this.panEvent = bindingX.bind({ + anchor: content, + eventType: 'pan', + props: [{ + element: content, + // ������width��������������������������� + property: 'transform.translateX', + expression + }] + }, (res) => { + this.moving = false + if (res.state === 'end' || res.state === 'exit') { + const deltaX = res.deltaX + if(deltaX <= -this.buttonsWidth || deltaX >= 0) { + // ���������������������������������������������������������������������������0������������������������������������������������������������������ + // ��������������������������������� + this.$nextTick(() => { + this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close' + }) + } else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) { + // ��������������������������������������������������������������������������������������� + // ������������������0��������������������������������� + if(Math.abs(deltaX) < this.buttonsWidth) { + this.moveCellByAnimation(deltaX > 0 ? 'close' : 'open') + } + } else { + // ���������������������������������������(������������������������������������������bindingX) + this.moveCellByAnimation('close') + } + } + }) + }, + // ������bindingX + unbindBindingX() { + // ������������������������ + if (this?.panEvent?.token != 0) { + bindingX.unbind({ + token: this.panEvent?.token, + // pan��������������� + eventType: 'pan' + }) + } + }, + // ������������������������ + queryRect() { + // ���������������������������������getRectByDom������������promise + const promiseAll = this.options.map((item, index) => { + return this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0]) + }) + // ������promise.all������������������������������������������������������������������ + Promise.all(promiseAll).then(sizes => { + this.buttons = sizes + // ��������������������������� + this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0) + }) + }, + // ������nvue���dom��������������������������� + getRectByDom(ref) { + return new Promise(resolve => { + dom.getComponentRect(ref, res => { + resolve(res.size) + }) + }) + }, + // ������������������������������������������ + moveCellByAnimation(status = 'open') { + if(this.moving) return + // ������������������ + this.moveing = true + const content = this.getContentRef() + const x = status === 'open' ? -this.buttonsWidth : 0 + animation.transition(content, { + styles: { + transform: `translateX(${x}px)`, + }, + duration: uni.$u.getDuration(this.duration, false), + timingFunction: 'ease-in-out' + }, () => { + this.moving = false + this.status = status + this.unbindBindingX() + }) + }, + // ������������ref + getContentRef() { + return this.$refs['u-swipe-action-item__content'].ref + }, + beforeDestroy() { + this.unbindBindingX() + } + } +} -- Gitblit v1.8.0