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