¶Ô±ÈÐÂÎļþ |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | x: 0, |
| | | transition: false, |
| | | width: 0, |
| | | viewWidth: 0, |
| | | swipeShow: 0 |
| | | } |
| | | }, |
| | | watch: { |
| | | show(newVal) { |
| | | if (this.autoClose) return |
| | | if (newVal && newVal !== 'none') { |
| | | this.transition = true |
| | | this.open(newVal) |
| | | } else { |
| | | this.close() |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | this.swipeaction = this.getSwipeAction() |
| | | if (this.swipeaction.children !== undefined) { |
| | | this.swipeaction.children.push(this) |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.isopen = false |
| | | setTimeout(() => { |
| | | this.getQuerySelect() |
| | | }, 50) |
| | | }, |
| | | methods: { |
| | | appTouchStart(e) { |
| | | const { |
| | | clientX |
| | | } = e.changedTouches[0] |
| | | this.clientX = clientX |
| | | this.timestamp = new Date().getTime() |
| | | }, |
| | | appTouchEnd(e, index, item, position) { |
| | | const { |
| | | clientX |
| | | } = e.changedTouches[0] |
| | | // fixed by xxxx 模æç¹å»äºä»¶ï¼è§£å³ ios 13 ç¹å»åºåéä½çé®é¢ |
| | | let diff = Math.abs(this.clientX - clientX) |
| | | let time = (new Date().getTime()) - this.timestamp |
| | | if (diff < 40 && time < 300) { |
| | | this.$emit('click', { |
| | | content: item, |
| | | index, |
| | | position |
| | | }) |
| | | } |
| | | }, |
| | | /** |
| | | * ç§»å¨è§¦å |
| | | * @param {Object} e |
| | | */ |
| | | onChange(e) { |
| | | this.moveX = e.detail.x |
| | | this.isclose = false |
| | | }, |
| | | touchstart(e) { |
| | | this.transition = false |
| | | this.isclose = true |
| | | this.autoClose && this.swipeaction.closeOther(this) |
| | | }, |
| | | touchmove(e) {}, |
| | | touchend(e) { |
| | | // 0çä½ç½®ä»ä¹é½ä¸æ§è¡ |
| | | if (this.isclose && this.isopen === 'none') return |
| | | if (this.isclose && this.isopen !== 'none') { |
| | | this.transition = true |
| | | this.close() |
| | | } else { |
| | | this.move(this.moveX + this.leftWidth) |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * ç§»å¨ |
| | | * @param {Object} moveX |
| | | */ |
| | | move(moveX) { |
| | | // æå¼å
³éçå¤çé»è¾ä¸å¤ªä¸æ · |
| | | this.transition = true |
| | | // æªæå¼ç¶æ |
| | | if (!this.isopen || this.isopen === 'none') { |
| | | if (moveX > this.threshold) { |
| | | this.open('left') |
| | | } else if (moveX < -this.threshold) { |
| | | this.open('right') |
| | | } else { |
| | | this.close() |
| | | } |
| | | } else { |
| | | if (moveX < 0 && moveX < this.rightWidth) { |
| | | const rightX = this.rightWidth + moveX |
| | | if (rightX < this.threshold) { |
| | | this.open('right') |
| | | } else { |
| | | this.close() |
| | | } |
| | | } else if (moveX > 0 && moveX < this.leftWidth) { |
| | | const leftX = this.leftWidth - moveX |
| | | if (leftX < this.threshold) { |
| | | this.open('left') |
| | | } else { |
| | | this.close() |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | }, |
| | | |
| | | /** |
| | | * æå¼ |
| | | */ |
| | | open(type) { |
| | | this.x = this.moveX |
| | | this.animation(type) |
| | | }, |
| | | |
| | | /** |
| | | * å
³é |
| | | */ |
| | | close() { |
| | | this.x = this.moveX |
| | | // TODO è§£å³ x å¼ä¸æ´æ°çé®é¢ï¼æä»¥ä¼å¤è§¦å䏿¬¡ nextTick ï¼å¾
ä¼å |
| | | this.$nextTick(() => { |
| | | this.x = -this.leftWidth |
| | | if (this.isopen !== 'none') { |
| | | this.$emit('change', 'none') |
| | | } |
| | | this.isopen = 'none' |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * æ§è¡ç»æå¨ç» |
| | | * @param {Object} type |
| | | */ |
| | | animation(type) { |
| | | this.$nextTick(() => { |
| | | if (type === 'left') { |
| | | this.x = 0 |
| | | } else { |
| | | this.x = -this.rightWidth - this.leftWidth |
| | | } |
| | | |
| | | if (this.isopen !== type) { |
| | | this.$emit('change', type) |
| | | } |
| | | this.isopen = type |
| | | }) |
| | | |
| | | }, |
| | | getSlide(x) {}, |
| | | getQuerySelect() { |
| | | const query = uni.createSelectorQuery().in(this); |
| | | query.selectAll('.movable-view--hock').boundingClientRect(data => { |
| | | this.leftWidth = data[1].width |
| | | this.rightWidth = data[2].width |
| | | this.width = data[0].width |
| | | this.viewWidth = this.width + this.rightWidth + this.leftWidth |
| | | if (this.leftWidth === 0) { |
| | | // TODO çä¼¼bug ,åå§åçæ¶å妿x æ¯0ï¼ä¼å¯¼è´ç§»å¨ä½ç½®éè¯¯ï¼æä»¥è®©å
ç´ è¶
åºä¸ç¹ |
| | | this.x = -0.1 |
| | | } else { |
| | | this.x = -this.leftWidth |
| | | } |
| | | this.moveX = this.x |
| | | this.$nextTick(() => { |
| | | this.swipeShow = 1 |
| | | }) |
| | | |
| | | if (!this.buttonWidth) { |
| | | this.disabledView = true |
| | | } |
| | | |
| | | if (this.autoClose) return |
| | | if (this.show !== 'none') { |
| | | this.transition = true |
| | | this.open(this.shows) |
| | | } |
| | | }).exec(); |
| | | |
| | | } |
| | | } |
| | | } |