AyaoJies-boot/AyaoJies-app/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpalipay.js

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();

        }
    }
}