123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- let otherMixins = {}
- // #ifndef APP-PLUS|| MP-WEIXIN || H5
- const MIN_DISTANCE = 10;
- otherMixins = {
- data() {
- // TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
- const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
- return {
- uniShow: false,
- left: 0,
- buttonShow: 'none',
- ani: false,
- moveLeft: '',
- elClass
- }
- },
- watch: {
- show(newVal) {
- if (this.autoClose) return
- this.openState(newVal)
- },
- left() {
- this.moveLeft = `translateX(${this.left}px)`
- },
- buttonShow(newVal) {
- if (this.autoClose) return
- this.openState(newVal)
- },
- leftOptions() {
- this.init()
- },
- rightOptions() {
- this.init()
- }
- },
- mounted() {
- this.swipeaction = this.getSwipeAction()
- if (this.swipeaction.children !== undefined) {
- this.swipeaction.children.push(this)
- }
- this.init()
- },
- methods: {
- init() {
- clearTimeout(this.timer)
- this.timer = setTimeout(() => {
- this.getSelectorQuery()
- }, 100)
- // 移动距离
- this.left = 0
- this.x = 0
- },
- closeSwipe(e) {
- if (!this.autoClose) return
- this.swipeaction.closeOther(this)
- },
- 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
- })
- }
- },
- touchstart(e) {
- if (this.disabled) return
- this.ani = false
- this.x = this.left || 0
- this.stopTouchStart(e)
- this.autoClose && this.closeSwipe()
- },
- touchmove(e) {
- if (this.disabled) return
- // 是否可以滑动页面
- this.stopTouchMove(e);
- if (this.direction !== 'horizontal') {
- return;
- }
- this.move(this.x + this.deltaX)
- return false
- },
- touchend() {
- if (this.disabled) return
- this.moveDirection(this.left)
- },
- /**
- * 设置移动距离
- * @param {Object} value
- */
- move(value) {
- value = value || 0
- const leftWidth = this.leftWidth
- const rightWidth = this.rightWidth
- // 获取可滑动范围
- this.left = this.range(value, -rightWidth, leftWidth);
- },
- /**
- * 获取范围
- * @param {Object} num
- * @param {Object} min
- * @param {Object} max
- */
- range(num, min, max) {
- return Math.min(Math.max(num, min), max);
- },
- /**
- * 移动方向判断
- * @param {Object} left
- * @param {Object} value
- */
- moveDirection(left) {
- const threshold = this.threshold
- const isopen = this.isopen || 'none'
- const leftWidth = this.leftWidth
- const rightWidth = this.rightWidth
- if (this.deltaX === 0) {
- this.openState('none')
- return
- }
- if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
- 0 && rightWidth +
- left < threshold)) {
- // right
- this.openState('right')
- } else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
- 0 &&
- leftWidth - left < threshold)) {
- // left
- this.openState('left')
- } else {
- // default
- this.openState('none')
- }
- },
- /**
- * 开启状态
- * @param {Boolean} type
- */
- openState(type) {
- const leftWidth = this.leftWidth
- const rightWidth = this.rightWidth
- let left = ''
- this.isopen = this.isopen ? this.isopen : 'none'
- switch (type) {
- case "left":
- left = leftWidth
- break
- case "right":
- left = -rightWidth
- break
- default:
- left = 0
- }
- if (this.isopen !== type) {
- this.throttle = true
- this.$emit('change', type)
- }
- this.isopen = type
- // 添加动画类
- this.ani = true
- this.$nextTick(() => {
- this.move(left)
- })
- // 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
- },
- close() {
- this.openState('none')
- },
- getDirection(x, y) {
- if (x > y && x > MIN_DISTANCE) {
- return 'horizontal';
- }
- if (y > x && y > MIN_DISTANCE) {
- return 'vertical';
- }
- return '';
- },
- /**
- * 重置滑动状态
- * @param {Object} event
- */
- resetTouchStatus() {
- this.direction = '';
- this.deltaX = 0;
- this.deltaY = 0;
- this.offsetX = 0;
- this.offsetY = 0;
- },
- /**
- * 设置滑动开始位置
- * @param {Object} event
- */
- stopTouchStart(event) {
- this.resetTouchStatus();
- const touch = event.touches[0];
- this.startX = touch.clientX;
- this.startY = touch.clientY;
- },
- /**
- * 滑动中,是否禁止打开
- * @param {Object} event
- */
- stopTouchMove(event) {
- const touch = event.touches[0];
- this.deltaX = touch.clientX - this.startX;
- this.deltaY = touch.clientY - this.startY;
- this.offsetX = Math.abs(this.deltaX);
- this.offsetY = Math.abs(this.deltaY);
- this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
- },
- getSelectorQuery() {
- const views = uni.createSelectorQuery().in(this)
- views
- .selectAll('.' + this.elClass)
- .boundingClientRect(data => {
- if (data.length === 0) return
- let show = 'none'
- if (this.autoClose) {
- show = 'none'
- } else {
- show = this.show
- }
- this.leftWidth = data[0].width || 0
- this.rightWidth = data[1].width || 0
- this.buttonShow = show
- })
- .exec()
- }
- }
- }
- // #endif
- export default otherMixins
|