From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 10 Nov 2023 13:08:29 +0800
Subject: [PATCH] fix:小程序详情修改
---
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