From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js | 270 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 270 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js b/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js
index e69de29..6b9f116 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js
+++ b/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue - backup.js
@@ -0,0 +1,270 @@
+// nvue鎿嶄綔dom鐨勫簱锛岀敤浜庤幏鍙杁om鐨勫昂瀵镐俊鎭�
+const dom = uni.requireNativePlugin('dom')
+// nvue涓敤浜庢搷浣滃厓绱犲姩鐢荤殑搴擄紝绫讳技浜巙ni.animation锛屽彧涓嶈繃uni.animation涓嶈兘鐢ㄤ簬nvue
+const animation = uni.requireNativePlugin('animation')
+
+export default {
+ data() {
+ return {
+ // 鏄惁婊戝姩涓�
+ moving: false,
+ // 鐘舵�侊紝open-鎵撳紑鐘舵�侊紝close-鍏抽棴鐘舵��
+ status: 'close',
+ // 寮�濮嬭Е鎽哥偣鐨刋鍜孻杞村潗鏍�
+ startX: 0,
+ startY: 0,
+ // 鎵�鏈夐殣钘忔寜閽殑灏哄淇℃伅鏁扮粍
+ buttons: [],
+ // 鎵�鏈夋寜閽殑鎬诲搴�
+ buttonsWidth: 0,
+ // 璁板綍涓婁竴娆＄Щ鍔ㄧ殑浣嶇疆鍊�
+ moveX: 0,
+ // 璁板綍涓婁竴娆℃粦鍔ㄧ殑浣嶇疆锛岀敤浜庡墠鍚庝袱娆″仛瀵规瘮锛屽鏋滅Щ鍔ㄧ殑璺濈灏忎簬鏌愪竴闃堝�硷紝鍒欒涓哄墠鍚庝箣闂存病鏈夌Щ鍔紝涓轰簡瑙ｅ喅鍙兘瀛樺湪鐨勯�氫俊闃诲闂
+ lastX: 0
+ }
+ },
+ 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: {
+ immediate: true,
+ handler(n) {
+ // if(n === true) {
+ // uni.$u.sleep(50).then(() => {
+ // this.openSwipeAction()
+ // })
+ // } else {
+ // this.closeSwipeAction()
+ // }
+ }
+ }
+ },
+ mounted() {
+ uni.$u.sleep(20).then(() => {
+ this.queryRect()
+ })
+ },
+ methods: {
+ close() {
+ this.closeSwipeAction()
+ },
+ // 瑙︽懜鍗曞厓鏍�
+ touchstart(event) {
+ if (this.disabled) return
+ this.closeOther()
+ const { touches } = event
+ // 璁板綍瑙︽懜寮�濮嬬偣鐨勫潗鏍囧��
+ this.startX = touches[0].pageX
+ this.startY = touches[0].pageY
+ },
+ // // 瑙︽懜婊戝姩
+ touchmove(event) {
+ if (this.disabled) return
+ const { touches } = event
+ const { pageX } = touches[0]
+ const { pageY } = touches[0]
+ let moveX = pageX - this.startX
+ const moveY = pageY - this.startY
+ const { buttonsWidth } = this
+ const len = this.buttons.length
+
+ // 鍒ゆ柇鍓嶅悗涓ゆ鐨勭Щ鍔ㄨ窛绂伙紝濡傛灉灏忎簬涓�瀹氬�硷紝鍒欎笉杩涜绉诲姩澶勭悊
+ if (Math.abs(pageX - this.lastX) < 0.3) return
+ this.lastX = pageX
+
+ // 绉诲姩鐨刋杞磋窛绂诲ぇ浜嶻杞磋窛绂伙紝涔熷嵆缁堢偣涓庤捣鐐逛綅缃繛绾匡紝涓嶺杞村す瑙掑皬浜�45搴︽椂锛岀姝㈤〉闈㈡粴鍔�
+ if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
+ event.stopPropagation()
+ }
+ // 濡傛灉绉诲姩鐨刋杞磋窛绂诲皬浜嶻杞磋窛绂伙紝涔熷嵆缁堢偣浣嶇疆涓庤捣鐐逛綅缃繛绾匡紝涓嶻杞村す瑙掑皬浜�45搴︽椂锛岃涓烘槸椤甸潰涓婁笅婊戝姩锛岃�屼笉鏄乏鍙虫粦鍔ㄥ崟鍏冩牸
+ if (Math.abs(moveX) < Math.abs(moveY)) return
+
+ // 闄愬埗鍙虫粦鐨勮窛绂伙紝涓嶅厑璁稿唴瀹归儴鍒嗗線鍙冲亸绉伙紝鍙虫粦浼氬鑷碭杞村亸绉诲�煎ぇ浜�0锛屼互姝ゅ仛鍒ゆ柇
+ // 姝ゅ涓嶈兘鐩存帴return锛屽洜涓烘粦鍔ㄨ繃绋嬩腑浼氱己澶辨煇浜涘叧閿偣鍧愭爣锛屼細瀵艰嚧閿欎贡锛屾渶濂界殑鍔炴硶灏辨槸
+ // 鍦ㄨ秴鍑哄悗锛岃缃负0
+ if (this.status === 'open') {
+ // 鍦ㄥ紑鍚姸鎬佷笅锛屽悜宸︽粦鍔紝闇�蹇界暐
+ if (moveX < 0) moveX = 0
+ // 鎯宠鏀惰捣鑿滃崟锛屾渶澶ц兘绉诲姩鐨勮窛绂讳负鎸夐挳鐨勬�诲搴�
+ if (moveX > buttonsWidth) moveX = buttonsWidth
+ // 濡傛灉鏄凡缁忔墦寮�浜嗙殑鐘舵�侊紝鍚戝乏婊戝姩鏃讹紝绉诲姩鏀惰捣鑿滃崟
+ this.moveSwipeAction(-buttonsWidth + moveX)
+ } else {
+ // 鍏抽棴鐘舵�佷笅锛屽彸婊戝姩闇�蹇界暐
+ if (moveX > 0) moveX = 0
+ // 婊戝姩鐨勮窛绂讳笉鍏佽瓒呰繃鎵�鏈夋寜閽殑鎬诲搴︼紝姝ゆ椂鍙兘鏄乏婊戯紝鏈�缁堣缃寜閽殑鎬诲搴︼紝鍚屾椂涓鸿礋鏁�
+ if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
+ // 鍙鏄湪婊戣繃绋嬩腑锛屽氨涓嶆柇绉诲姩鑿滃崟鐨勫唴瀹归儴鍒嗭紝浠庤�屼娇闅愯棌鐨勮彍鍗曟樉绀哄嚭鏉�
+ this.moveSwipeAction(moveX)
+ }
+ },
+ // 鍗曞厓鏍肩粨鏉熻Е鎽�
+ touchend(event) {
+ if (this.disabled) return
+ const touches = event.changedTouches ? event.changedTouches[0] : {}
+ const { pageX } = touches
+ const { pageY } = touches
+ const { buttonsWidth } = this
+ this.moveX = pageX - this.startX
+ if (this.status === 'open') {
+ // 鍦ㄥ睍寮�鐨勭姸鎬佷笅锛岀户缁乏婊戯紝鏃犻渶鎿嶄綔
+ if (this.moveX < 0) this.moveX = 0
+ if (this.moveX > buttonsWidth) this.moveX = buttonsWidth
+ // 鍦ㄥ紑鍚姸鎬佷笅锛岀偣鍑讳竴涓嬪唴瀹瑰尯鍩燂紝moveX涓�0锛屼篃鍗虫病鏈夎繘琛岀Щ鍔紝杩欐椂鎵ц鏀惰捣鑿滃崟閫昏緫
+ if (this.moveX === 0) {
+ return this.closeSwipeAction()
+ }
+ // 鍦ㄥ紑鍚姸鎬佷笅锛屾粦鍔ㄨ窛绂诲皬浜庨槇鍊硷紝鍒欓粯璁や负涓嶅叧闂紝鍚屾椂鎭㈠鍘熸潵鐨勬墦寮�鐘舵��
+ if (Math.abs(this.moveX) < this.threshold) {
+ this.openSwipeAction()
+ } else {
+ // 濡傛灉婊戝姩璺濈澶т簬闃堝�硷紝鍒欐墽琛屾敹璧烽�昏緫
+ this.closeSwipeAction()
+ }
+ } else {
+ // 鍦ㄥ叧闂殑鐘舵�佷笅锛屽彸婊戯紝鏃犻渶鎿嶄綔
+ if (this.moveX >= 0) this.moveX = 0
+ if (this.moveX <= -buttonsWidth) this.moveX = -buttonsWidth
+ // 鐞嗙敱鍚屼笂
+ if (Math.abs(this.moveX) < this.threshold) {
+ this.closeSwipeAction()
+ } else {
+ this.openSwipeAction()
+ }
+ }
+ },
+ // 绉诲姩婊戝姩閫夋嫨鍣ㄥ唴瀹瑰尯鍩燂紝鍚屾椂鏄剧ず鍑哄叾闅愯棌鐨勮彍鍗�
+ moveSwipeAction(moveX) {
+ if (this.moving) return
+ this.moving = true
+
+ let previewButtonsMoveX = 0
+ const len = this.buttons.length
+ animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
+ styles: {
+ transform: `translateX(${moveX}px)`
+ },
+ timingFunction: 'linear'
+ }, () => {
+ this.moving = false
+ })
+ // 鎸夐挳鐨勭粍鐨勯暱搴�
+ for (let i = len - 1; i >= 0; i--) {
+ const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
+ // 閫氳繃姣斾緥锛屽緱鍑哄厓绱犺嚜韬绉诲姩鐨勮窛绂�
+ const translateX = this.buttons[i].width / this.buttonsWidth * moveX
+ // 鏈�缁堢Щ鍔ㄧ殑璺濈锛屾槸閫氳繃鑷韩姣斾緥绠楀嚭鐨勮窛绂伙紝鍐嶅姞涓婂湪瀹冧箣鍓嶆墍鏈夋寜閽Щ鍔ㄧ殑璺濈涔嬪拰
+ const realTranslateX = translateX + previewButtonsMoveX
+ animation.transition(buttonRef, {
+ styles: {
+ transform: `translateX(${realTranslateX}px)`
+ },
+ duration: 0,
+ delay: 0,
+ timingFunction: 'linear'
+ }, () => {})
+ // 璁板綍鏈寜閽箣鍓嶇殑鎵�鏈夋寜閽殑绉诲姩璺濈涔嬪拰
+ previewButtonsMoveX += translateX
+ }
+ },
+ // 鍏抽棴鑿滃崟
+ closeSwipeAction() {
+ if (this.status === 'close') return
+ this.moving = true
+ const { buttonsWidth } = this
+ animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
+ styles: {
+ transform: 'translateX(0px)'
+ },
+ duration: this.getDuratin,
+ timingFunction: 'ease-in-out'
+ }, () => {
+ this.status = 'close'
+ this.moving = false
+ this.closeHandler()
+ })
+ // 鎸夐挳鐨勭粍鐨勯暱搴�
+ const len = this.buttons.length
+ for (let i = len - 1; i >= 0; i--) {
+ const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
+ // 濡傛灉涓嶆弧瓒宠竟鐣屾潯浠讹紝杩斿洖
+ if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
+
+ animation.transition(buttonRef, {
+ styles: {
+ transform: 'translateX(0px)'
+ },
+ duration: this.getDuratin,
+ timingFunction: 'ease-in-out'
+ }, () => {})
+ }
+ },
+ // 鎵撳紑鑿滃崟
+ openSwipeAction() {
+ if (this.status === 'open') return
+ this.moving = true
+ const buttonsWidth = -this.buttonsWidth
+ let previewButtonsMoveX = 0
+ animation.transition(this.$refs['u-swipe-action-item__content'].ref, {
+ styles: {
+ transform: `translateX(${buttonsWidth}px)`
+ },
+ duration: this.getDuratin,
+ timingFunction: 'ease-in-out'
+ }, () => {
+ this.status = 'open'
+ this.moving = false
+ this.openHandler()
+ })
+ // 鎸夐挳鐨勭粍鐨勯暱搴�
+ const len = this.buttons.length
+ for (let i = len - 1; i >= 0; i--) {
+ const buttonRef = this.$refs[`u-swipe-action-item__right__button-${i}`][0].ref
+ // 濡傛灉涓嶆弧瓒宠竟鐣屾潯浠讹紝杩斿洖
+ if (this.buttons.length === 0 || !this.buttons[i] || !this.buttons[i].width) return
+ // 閫氳繃姣斾緥锛屽緱鍑哄厓绱犺嚜韬绉诲姩鐨勮窛绂�
+ const translateX = this.buttons[i].width / this.buttonsWidth * buttonsWidth
+ // 鏈�缁堢Щ鍔ㄧ殑璺濈锛屾槸閫氳繃鑷韩姣斾緥绠楀嚭鐨勮窛绂伙紝鍐嶅姞涓婂湪瀹冧箣鍓嶆墍鏈夋寜閽Щ鍔ㄧ殑璺濈涔嬪拰
+ const realTranslateX = translateX + previewButtonsMoveX
+ animation.transition(buttonRef, {
+ styles: {
+ transform: `translateX(${realTranslateX}px)`
+ },
+ duration: this.getDuratin,
+ timingFunction: 'ease-in-out'
+ }, () => {})
+ previewButtonsMoveX += translateX
+ }
+ },
+ // 鏌ヨ鎸夐挳鑺傜偣淇℃伅
+ queryRect() {
+ // 鍘嗛亶鎵�鏈夋寜閽暟缁勶紝閫氳繃getRectByDom杩斿洖涓�涓猵romise
+ const promiseAll = this.rightOptions.map((item, index) => 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鐨刣om妯″潡锛屾煡璇㈣妭鐐逛俊鎭�
+ getRectByDom(ref) {
+ return new Promise((resolve) => {
+ dom.getComponentRect(ref, (res) => {
+ resolve(res.size)
+ })
+ })
+ }
+ }
+}
--
Gitblit v1.9.3