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.js | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 174 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js b/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js
new file mode 100644
index 0000000..118e4cf
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js
@@ -0,0 +1,174 @@
+// nvue鎿嶄綔dom鐨勫簱锛岀敤浜庤幏鍙杁om鐨勫昂瀵镐俊鎭�
+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) {
+ // 濡傛灉褰撳墠姝ｅ湪绉诲姩涓紝鎴栬�卍isabled鐘舵�侊紝鍒欒繑鍥�
+ 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杩斿洖涓�涓猵romise
+ 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鐨刣om妯″潡锛屾煡璇㈣妭鐐逛俊鎭�
+ 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.9.3