From 2d43a1df3f5ba42710e6d21c27d1e13bdb8dfd56 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期一, 24 三月 2025 09:23:08 +0800
Subject: [PATCH] -
---
src/uni_modules/uview-plus/components/u-swipe-action-item/other.js | 349 +++++++++++++++++++++++++++++----------------------------
1 files changed, 178 insertions(+), 171 deletions(-)
diff --git a/src/uni_modules/uview-plus/components/u-swipe-action-item/other.js b/src/uni_modules/uview-plus/components/u-swipe-action-item/other.js
index 6729dd1..5ec51f0 100644
--- a/src/uni_modules/uview-plus/components/u-swipe-action-item/other.js
+++ b/src/uni_modules/uview-plus/components/u-swipe-action-item/other.js
@@ -1,171 +1,178 @@
-export default {
- data() {
- return {
- state: {
- moving: false,
- startX: 0,
- startY: 0,
- buttonsWidth: 0
- }
- }
- },
- watch: {
- status(newValue) {
- if (this.disabled) return
- // 鎵撳紑鎴栧叧闂崟鍏冩牸
- if (newValue === 'close' && this.status === 'open') {
- this.closeSwipeAction(instance, ownerInstance)
- } else if(newValue === 'open' && this.status === 'close') {
- this.openSwipeAction()
- }
- },
- options(newVal) {
- this.getBtnWidth()
- }
- },
- mounted() {
- this.getBtnWidth()
- },
- methods: {
- clickHandler() {
- },
setStatus(status) {
this.status = status
},
- getBtnWidth() {
- let view = uni.createSelectorQuery().in(this).select(".u-swipe-action-item__right");
- view.fields({
- size: true,
- scrollOffset: true
- }, data => {
- this.state.buttonsWidth = data.width
- // console.log("寰楀埌鑺傜偣淇℃伅" + JSON.stringify(data));
- }).exec();
- },
- // 寮�濮嬭Е鎽�
- touchstart(event) {
- // console.log(event)
- // 鏍囪瘑褰撳墠涓烘粦鍔ㄤ腑鐘舵��
- this.state.moving = true
- // 璁板綍瑙︽懜寮�濮嬬偣鐨勫潗鏍囧��
- var touches = event.touches
- this.state.startX = touches[0].pageX
- this.state.startY = touches[0].pageY
-
- // todo鍏抽棴鍏跺畠
- // this.$parent && this.$parent.closeOther(this)
- },
- touchmove(event) {
- // console.log(event)
- if (this.disabled || !this.state.moving) return
- var touches = event.touches
- var pageX = touches[0].pageX
- var pageY = touches[0].pageY
- var moveX = pageX - this.state.startX
- var moveY = pageY - this.state.startY
-
- // 绉诲姩鐨刋杞磋窛绂诲ぇ浜嶻杞磋窛绂伙紝涔熷嵆缁堢偣涓庤捣鐐逛綅缃繛绾匡紝涓嶺杞村す瑙掑皬浜�45搴︽椂锛岀姝㈤〉闈㈡粴鍔�
- if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
- event.preventDefault && event.preventDefault()
- event.stopPropagation && 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 > this.state.buttonsWidth) moveX = this.state.buttonsWidth
- // 濡傛灉鏄凡缁忔墦寮�浜嗙殑鐘舵�侊紝鍚戝乏婊戝姩鏃讹紝绉诲姩鏀惰捣鑿滃崟
- this.moveSwipeAction(-this.state.buttonsWidth + moveX)
- } else {
- // 鍏抽棴鐘舵�佷笅锛屽彸婊戝姩闇�蹇界暐
- if (moveX > 0) moveX = 0
- // 婊戝姩鐨勮窛绂讳笉鍏佽瓒呰繃鎵�鏈夋寜閽殑鎬诲搴︼紝姝ゆ椂鍙兘鏄乏婊戯紝鏈�缁堣缃寜閽殑鎬诲搴︼紝鍚屾椂涓鸿礋鏁�
- if (Math.abs(moveX) > this.state.buttonsWidth) moveX = -this.state.buttonsWidth
- // 鍙鏄湪婊戣繃绋嬩腑锛屽氨涓嶆柇绉诲姩鍗曞厓鏍煎唴瀹归儴鍒嗭紝浠庤�屼娇闅愯棌鐨勮彍鍗曟樉绀哄嚭鏉�
- this.moveSwipeAction(moveX)
- }
- },
- touchend(event) {
- // console.log(event)
- if (!this.state.moving || this.disabled) return
- this.state.moving = false
- var touches = event.changedTouches ? event.changedTouches[0] : {}
- var pageX = touches.pageX
- var pageY = touches.pageY
- var moveX = pageX - this.state.startX
- if (this.status === 'open') {
- // 鍦ㄥ睍寮�鐨勭姸鎬佷笅锛岀户缁乏婊戯紝鏃犻渶鎿嶄綔
- if (moveX < 0) return
- // 鍦ㄥ紑鍚姸鎬佷笅锛岀偣鍑讳竴涓嬪唴瀹瑰尯鍩燂紝moveX涓�0锛屼篃鍗虫病鏈夎繘琛岀Щ鍔紝杩欐椂鎵ц鏀惰捣鑿滃崟閫昏緫
- if (moveX === 0) {
- return this.closeSwipeAction()
- }
- // 鍦ㄥ紑鍚姸鎬佷笅锛屾粦鍔ㄨ窛绂诲皬浜庨槇鍊硷紝鍒欓粯璁や负涓嶅叧闂紝鍚屾椂鎭㈠鍘熸潵鐨勬墦寮�鐘舵��
- if (Math.abs(moveX) < this.threshold) {
- this.openSwipeAction()
- } else {
- // 濡傛灉婊戝姩璺濈澶т簬闃堝�硷紝鍒欐墽琛屾敹璧烽�昏緫
- this.closeSwipeAction()
- }
- } else {
- // 鍦ㄥ叧闂殑鐘舵�佷笅锛屽彸婊戯紝鏃犻渶鎿嶄綔
- if (moveX > 0) return
- // 鐞嗙敱鍚屼笂
- if (Math.abs(moveX) < this.threshold) {
- this.closeSwipeAction()
- } else {
- this.openSwipeAction()
- }
- }
- },
- // 涓�娆℃�у睍寮�婊戝姩鑿滃崟
- openSwipeAction() {
- // 澶勭悊duration鍗曚綅闂
- var duration = this.getDuration(this.duration)
- // 灞曞紑杩囩▼涓紝鏄悜宸︾Щ鍔紝鎵�浠鐨勫亸绉诲簲璇ヤ负璐熷��
- var buttonsWidth = -this.state.buttonsWidth
- this.sliderStyle = {
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(' + buttonsWidth + 'px)',
- '-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
- }
- this.setStatus('open')
- },
- // 涓�娆℃�ф敹璧锋粦鍔ㄨ彍鍗�
- closeSwipeAction() {
- // 澶勭悊duration鍗曚綅闂
- var duration = this.getDuration(this.duration)
- this.sliderStyle = {
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(0px)',
- '-webkit-transform': 'translateX(0px)'
- }
- // 璁剧疆鍚勪釜闅愯棌鐨勬寜閽负鏀惰捣鐨勭姸鎬�
- // for (var i = this.state.buttonsWidth - 1; i >= 0; i--) {
- // buttons[i].setStyle({
- // 'transition': 'transform ' + duration,
- // 'transform': 'translateX(0px)',
- // '-webkit-transform': 'translateX(0px)'
- // })
- // }
- this.setStatus('close')
- },
- // 绉诲姩婊戝姩閫夋嫨鍣ㄥ唴瀹瑰尯鍩燂紝鍚屾椂鏄剧ず鍑哄叾闅愯棌鐨勮彍鍗�
- moveSwipeAction(moveX) {
- // 璁剧疆鑿滃崟鍐呭閮ㄥ垎鐨勫亸绉�
- this.sliderStyle = {
- 'transition': 'none',
- transform: 'translateX(' + moveX + 'px)',
- '-webkit-transform': 'translateX(' + moveX + 'px)'
- }
- },
- // 鑾峰彇杩囨浮鏃堕棿
- getDuration(value) {
- if (value.toString().indexOf('s') >= 0) return value
- return value > 30 ? value + 'ms' : value + 's'
- }
- }
-}
+export default {
+ data() {
+ return {
+ state: {
+ moving: false,
+ startX: 0,
+ startY: 0,
+ buttonsWidth: 0
+ }
+ }
+ },
+ watch: {
+ status(newValue) {
+ if (this.disabled) return
+ // 鎵撳紑鎴栧叧闂崟鍏冩牸
+ if (newValue === 'close' && this.status === 'open') {
+ this.closeSwipeAction()
+ } else if(newValue === 'open' && this.status === 'close') {
+ this.openSwipeAction()
+ }
+ },
+ options(newVal) {
+ this.getBtnWidth()
+ }
+ },
+ mounted() {
+ this.getBtnWidth()
+ },
+ methods: {
+ clickHandler() {
+ },
+ closeHandler() {
+ this.closeSwipeAction()
+ },
+ setStatus(status) {
+ this.status = status
+ },
+ getBtnWidth() {
+ let view = uni.createSelectorQuery().in(this).select(".u-swipe-action-item__right");
+ view.fields({
+ size: true,
+ scrollOffset: true
+ }, data => {
+ this.state.buttonsWidth = data.width
+ // console.log("寰楀埌鑺傜偣淇℃伅" + JSON.stringify(data));
+ }).exec();
+ },
+ // 寮�濮嬭Е鎽�
+ touchstart(event) {
+ // console.log(event)
+ // 鏍囪瘑褰撳墠涓烘粦鍔ㄤ腑鐘舵��
+ this.state.moving = true
+ // 璁板綍瑙︽懜寮�濮嬬偣鐨勫潗鏍囧��
+ var touches = event.touches
+ this.state.startX = touches[0].pageX
+ this.state.startY = touches[0].pageY
+
+ // 鍏抽棴鍏跺畠
+ // console.log(this.parent)
+ this.parent && this.parent.closeOther(this)
+ },
+ touchmove(event) {
+ // console.log(event)
+ if (this.disabled || !this.state.moving) return
+ var touches = event.touches
+ var pageX = touches[0].pageX
+ var pageY = touches[0].pageY
+ var moveX = pageX - this.state.startX
+ var moveY = pageY - this.state.startY
+
+ // 绉诲姩鐨刋杞磋窛绂诲ぇ浜嶻杞磋窛绂伙紝涔熷嵆缁堢偣涓庤捣鐐逛綅缃繛绾匡紝涓嶺杞村す瑙掑皬浜�45搴︽椂锛岀姝㈤〉闈㈡粴鍔�
+ if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > this.threshold) {
+ event.preventDefault && event.preventDefault()
+ event.stopPropagation && 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 > this.state.buttonsWidth) moveX = this.state.buttonsWidth
+ // 濡傛灉鏄凡缁忔墦寮�浜嗙殑鐘舵�侊紝鍚戝乏婊戝姩鏃讹紝绉诲姩鏀惰捣鑿滃崟
+ this.moveSwipeAction(-this.state.buttonsWidth + moveX)
+ } else {
+ // 鍏抽棴鐘舵�佷笅锛屽彸婊戝姩闇�蹇界暐
+ if (moveX > 0) moveX = 0
+ // 婊戝姩鐨勮窛绂讳笉鍏佽瓒呰繃鎵�鏈夋寜閽殑鎬诲搴︼紝姝ゆ椂鍙兘鏄乏婊戯紝鏈�缁堣缃寜閽殑鎬诲搴︼紝鍚屾椂涓鸿礋鏁�
+ if (Math.abs(moveX) > this.state.buttonsWidth) moveX = -this.state.buttonsWidth
+ // 鍙鏄湪婊戣繃绋嬩腑锛屽氨涓嶆柇绉诲姩鍗曞厓鏍煎唴瀹归儴鍒嗭紝浠庤�屼娇闅愯棌鐨勮彍鍗曟樉绀哄嚭鏉�
+ this.moveSwipeAction(moveX)
+ }
+ },
+ touchend(event) {
+ // console.log(event)
+ if (!this.state.moving || this.disabled) return
+ this.state.moving = false
+ var touches = event.changedTouches ? event.changedTouches[0] : {}
+ var pageX = touches.pageX
+ var pageY = touches.pageY
+ var moveX = pageX - this.state.startX
+ if (this.status === 'open') {
+ // 鍦ㄥ睍寮�鐨勭姸鎬佷笅锛岀户缁乏婊戯紝鏃犻渶鎿嶄綔
+ if (moveX < 0) return
+ // 鍦ㄥ紑鍚姸鎬佷笅锛岀偣鍑讳竴涓嬪唴瀹瑰尯鍩燂紝moveX涓�0锛屼篃鍗虫病鏈夎繘琛岀Щ鍔紝杩欐椂鎵ц鏀惰捣鑿滃崟閫昏緫
+ if (moveX === 0) {
+ return this.closeSwipeAction()
+ }
+ // 鍦ㄥ紑鍚姸鎬佷笅锛屾粦鍔ㄨ窛绂诲皬浜庨槇鍊硷紝鍒欓粯璁や负涓嶅叧闂紝鍚屾椂鎭㈠鍘熸潵鐨勬墦寮�鐘舵��
+ if (Math.abs(moveX) < this.threshold) {
+ this.openSwipeAction()
+ } else {
+ // 濡傛灉婊戝姩璺濈澶т簬闃堝�硷紝鍒欐墽琛屾敹璧烽�昏緫
+ this.closeSwipeAction()
+ }
+ } else {
+ // 鍦ㄥ叧闂殑鐘舵�佷笅锛屽彸婊戯紝鏃犻渶鎿嶄綔
+ if (moveX > 0) return
+ // 鐞嗙敱鍚屼笂
+ if (Math.abs(moveX) < this.threshold) {
+ this.closeSwipeAction()
+ } else {
+ this.openSwipeAction()
+ }
+ }
+ },
+ // 涓�娆℃�у睍寮�婊戝姩鑿滃崟
+ openSwipeAction() {
+ // 澶勭悊duration鍗曚綅闂
+ var duration = this.getDuration(this.duration)
+ // 灞曞紑杩囩▼涓紝鏄悜宸︾Щ鍔紝鎵�浠鐨勫亸绉诲簲璇ヤ负璐熷��
+ var buttonsWidth = -this.state.buttonsWidth
+ this.sliderStyle = {
+ 'transition': 'transform ' + duration,
+ 'transform': 'translateX(' + buttonsWidth + 'px)',
+ '-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
+ }
+ this.setStatus('open')
+ },
+ // 涓�娆℃�ф敹璧锋粦鍔ㄨ彍鍗�
+ closeSwipeAction() {
+ // 澶勭悊duration鍗曚綅闂
+ var duration = this.getDuration(this.duration)
+ this.sliderStyle = {
+ 'transition': 'transform ' + duration,
+ 'transform': 'translateX(0px)',
+ '-webkit-transform': 'translateX(0px)'
+ }
+ // 璁剧疆鍚勪釜闅愯棌鐨勬寜閽负鏀惰捣鐨勭姸鎬�
+ // for (var i = this.state.buttonsWidth - 1; i >= 0; i--) {
+ // buttons[i].setStyle({
+ // 'transition': 'transform ' + duration,
+ // 'transform': 'translateX(0px)',
+ // '-webkit-transform': 'translateX(0px)'
+ // })
+ // }
+ this.setStatus('close')
+ },
+ // 绉诲姩婊戝姩閫夋嫨鍣ㄥ唴瀹瑰尯鍩燂紝鍚屾椂鏄剧ず鍑哄叾闅愯棌鐨勮彍鍗�
+ moveSwipeAction(moveX) {
+ // 璁剧疆鑿滃崟鍐呭閮ㄥ垎鐨勫亸绉�
+ this.sliderStyle = {
+ 'transition': 'none',
+ transform: 'translateX(' + moveX + 'px)',
+ '-webkit-transform': 'translateX(' + moveX + 'px)'
+ }
+ },
+ // 鑾峰彇杩囨浮鏃堕棿
+ getDuration(value) {
+ if (value.toString().indexOf('s') >= 0) return value
+ return value > 30 ? value + 'ms' : value + 's'
+ }
+ }
+}
--
Gitblit v1.9.1