Question

www.un.org/Depts/DGACM/index_spanish.htm 我需要增加一个简单的左侧/右 s带,使选定的图像周期在移动上消失,类似于在英雄构成部分中点击 but子,也类似于把左侧/右arrow钥匙放在一个关键板上。

如果任何人能够告诉我什么是确切的写字,以及我能够完全总结这一项目,那么我就没有 experience文的经验。

http://nufaith.ca/justinatkins/“rel=“noreferer”

<><>Code>:

Vue.component( hero-bg , {
  template: `
    <div class="hero-bg">
      <div class="hero">
        <img id="pushed" :src="selected"/>
      </div>
    </div>
    `,
  props: [ selected ]
});

Vue.component( hero-bg-empty , {
  template: `
    <div class="hero-bg">
      <div class="hero">
      <span style="display:block;height:100px;"></span>
      </div>
    </div>
    `
});

Vue.component( hero , {
  template: `
    <div>
      <topbar v-if="!gridEnabled"></topbar>
      <topbar2 v-if="gridEnabled"></topbar2>
      <hero-bg :selected="selectedItem.img" v-if="!gridEnabled"></hero-bg>
      <hero-bg-empty v-if="gridEnabled"></hero-bg-empty>
      <div class="hero-container" v-if="!gridEnabled">
        <div class="hero">
          <img :src="selectedItem.img" v-if="thing" alt=""/>
        </div>

        <div class="hero-desc">
          <button class="control left" @click="previous">
            <i class="zmdi zmdi-chevron-left"></i>
          </button>
          <span class="hero-desc-title" v-html="title"></span>
          <button class="control right" @click="next">
            <i class="zmdi zmdi-chevron-right"></i>
          </button>
          <br/>
          <button class="view-all-button" @click="enableGrid">OVERVIEW</button>
        </div>
      </div>
    </div>
    `,
  data() {
    return {
      gridEnabled: false,
      selected: 0,
      thing: true
    };
  },
  computed: {
    selectedItem() {
      return info[this.selected];
    },
    title() {
      const comma = this.selectedItem.title.indexOf( , );
      const len = this.selectedItem.title.length;
      const strBeginning = this.selectedItem.title.substring(comma, 0);
      const strEnd = this.selectedItem.title.substring(comma, len);
      if (this.selectedItem.title.includes( , )) {
        return `<span>${strBeginning}<span class="font-regular font-muted">${strEnd}</span></span>`;
      }
      return this.selectedItem.title;
    },
    maxImages() {
      return info.length - 1;
    }
  },
  created() {
    window.addEventListener( keydown , e => {
      if (e.keyCode === 37) {
        this.previous();
        return;
      }

      if (e.keyCode === 39) {
        this.next();
        return;
      }
    });
    Event.$on( updateImg , index => {
      this.selected = index;
      this.gridEnabled = !this.gridEnabled;
    });
  },
  methods: {
    next() {
      this.selected === this.maxImages ? (this.selected = 0) : (this.selected += 1);
    },
    previous() {
      this.selected === 0 ? (this.selected = this.maxImages) : (this.selected -= 1);
    },
    enableGrid() {
      this.gridEnabled = !this.gridEnabled;
      window.scroll(0, 0);
      Event.$emit( enableGrid );
    }
  }
});

Answer 1

这就是我在其中一个项目中如何执行一个简单的Swipe gesture。您可以检查。

<><>Code>:

touchableElement.addEventListener( touchstart , function (event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
}, false);

touchableElement.addEventListener( touchend , function (event) {
    touchendX = event.changedTouches[0].screenX;
    touchendY = event.changedTouches[0].screenY;
    handleGesture();
}, false);


function handleGesture() {
    if (touchendX < touchstartX) {
        console.log( Swiped Left );
    }

    if (touchendX > touchstartX) {
        console.log( Swiped Right );
    }

    if (touchendY < touchstartY) {
        console.log( Swiped Up );
    }

    if (touchendY > touchstartY) {
        console.log( Swiped Down );
    }

    if (touchendY === touchstartY) {
        console.log( Tap );
    }
}

基本上,touchableElement 此处提及的是,接收触动活动。如果你想在你的整个屏幕上启动炉.选择,那么你可使用<条码><人/代码>标签作为可触及的内容。或者,如果你只想把任何特定的<代码>div要素混为一谈,则你可以将这种内容混为一谈。

在<代码>可兑现的上,我们在此增加2个活动清单:

touchstart: this is when user starts swiping. We take that initial coordinates (x,y) and store them into touchstartX, touchstartY respectively.
touchend: this is when user stops swiping. We take that final coordinates (x, y) and store them into touchendX, touchendY respectively.

铭记这些坐标的起源是屏幕上左上角。 <x-coordination increase, as You go from left to right and y-coordination increase as You go from top to below/strong>.

然后,在<代码>handleGesture(>)中,我们仅对坐标(touchstartX, 触动Y)和(touchendX, 触动Y)的2平方英尺进行比较,以发现不同类型的pe(最后,左,正确):

: 说,用户started swiping at a higher x Value &stopped swiping at a down X Value 。这意味着,从权利到离开(Swiped左)。
: 说,用户started swiping at a down X Value/strong> &stopped swiping at a higher X Value。这意味着,从左到右边的

: 用户started swiping at a higher Y Value &stopped swiping at a Y Value。这意味着,从底层到顶点(Swiped Up)。

: 用户started swiping at a down Y Value &stopped swiping at a higher Y Value。这意味着,从上到下至下(Swiped Down)。

如守则所示,你可在相应的<<><>>>><>>>栏上添加这4项不同事件(Swipe Up/Down/Left/Right)的代码。

Answer 2

我用了mmehrab的回答,增加了一些门槛,以避免意外的泥pes,将其变成一个小的图书馆。亲眼看着:

export default class TouchEvent {
    static SWIPE_THRESHOLD = 50; // Minimum difference in pixels at which a swipe gesture is detected

    static SWIPE_LEFT   = 1;
    static SWIPE_RIGHT  = 2;
    static SWIPE_UP     = 3;
    static SWIPE_DOWN   = 4;

    constructor(startEvent, endEvent) {
        this.startEvent = startEvent;
        this.endEvent = endEvent || null;
    }

    isSwipeLeft() {
        return this.getSwipeDirection() == TouchEvent.SWIPE_LEFT;
    }

    isSwipeRight() {
        return this.getSwipeDirection() == TouchEvent.SWIPE_RIGHT;
    }

    isSwipeUp() {
        return this.getSwipeDirection() == TouchEvent.SWIPE_UP;
    }

    isSwipeDown() {
        return this.getSwipeDirection() == TouchEvent.SWIPE_DOWN;
    }

    getSwipeDirection() {
        if (!this.startEvent.changedTouches || !this.endEvent.changedTouches) {
            return null;
        }

        let start = this.startEvent.changedTouches[0];
        let end = this.endEvent.changedTouches[0];

        if (!start || !end) {
            return null;
        }

        let horizontalDifference = start.screenX - end.screenX;
        let verticalDifference = start.screenY - end.screenY;

        // Horizontal difference dominates
        if (Math.abs(horizontalDifference) > Math.abs(verticalDifference)) {
            if (horizontalDifference >= TouchEvent.SWIPE_THRESHOLD) {
                return TouchEvent.SWIPE_LEFT;
            } else if (horizontalDifference <= -TouchEvent.SWIPE_THRESHOLD) {
                return TouchEvent.SWIPE_RIGHT;
            }

        // Vertical or no difference dominates
        } else {
            if (verticalDifference >= TouchEvent.SWIPE_THRESHOLD) {
                return TouchEvent.SWIPE_UP;
            } else if (verticalDifference <= -TouchEvent.SWIPE_THRESHOLD) {
                return TouchEvent.SWIPE_DOWN;
            }
        }

        return null;
    }

    setEndEvent(endEvent) {
        this.endEvent = endEvent;
    }
}

How to use

简略地将其活动从到startuch 和touchend :

import TouchEvent from  @/TouchEvent 

let touchEvent = null;

document.addEventListener( touchstart , (event) => {
    touchEvent = new TouchEvent(event);
});

document.addEventListener( touchend , handleSwipe);

function handleSwipe(event) {
    if (!touchEvent) {
         return;
    }

    touchEvent.setEndEvent(event);

    if (touchEvent.isSwipeRight()) {
        // Do something
    } else if (touchEvent.isSwipeLeft()) {
        // Do something different
    }

    // Reset event for next touch
    touchEvent = null;
}

Answer 3

这种声音,如:Hammer.JS,除非你努力避免依赖。 https://hammerjs.github.io/ap-started/“rel=“noreferer”>

我不知道什么东西,因此,我担心这成为盲人假想的盲人,但你不得不做的头一件事是用 n子或arn子补充依赖,然后用 n子将其添加到你档案的顶端。

import Hammer from hammerjs

在该行上添加以下代码:Event.$on(更新Img,指数 =>{

const swipeableEl = document.getElementsByClassName( .hero )[0];
this.hammer = Hammer(swipeableEl)
this.hammer.on( swipeleft , () => this.next())
this.hammer.on( swiperight , () => this.previous())

如果做不到工作,你就不得不检查你的开发工具/ole号,看看它是否留下任何有用的错误。

http://codepen.io/lisilinhart/pen/wxRQBo“rel=“noreferer”编码或许也是有用的资源:

Good luck.

Answer 4

我利用@smmehrab的答复,创建了一个可装3的堆肥器,也用于SSR大楼。

import { onMounted, Ref } from  vue 
export type SwipeCallback = (event: TouchEvent) => void;
export type SwipeOptions = {
    directinoal_threshold?: number; // Pixels offset to trigger swipe
};
export const useSwipe = (touchableElement: HTMLElement = null, options: Ref<SwipeOptions> = ref({
    directinoal_threshold: 10
})) => {
    const touchStartX = ref(0);
    const touchEndX = ref(0);
    const touchStartY = ref(0);
    const touchEndY = ref(0);

    onMounted(() => {
        if (!touchableElement)
            touchableElement = document.body;
        touchableElement.addEventListener( touchstart , (event) => {
            touchStartX.value = event.changedTouches[0].screenX;
            touchStartY.value = event.changedTouches[0].screenY;
        }, false);

        touchableElement.addEventListener( touchend , (event) => {
            touchEndX.value = event.changedTouches[0].screenX;
            touchEndY.value = event.changedTouches[0].screenY;
            handleGesture(event);
        }, false);
    });

    const onSwipeLeft: Array<SwipeCallback> = [];
    const onSwipeRight: Array<SwipeCallback> = [];
    const onSwipeUp: Array<SwipeCallback> = [];
    const onSwipeDown: Array<SwipeCallback> = [];
    const onTap: Array<SwipeCallback> = [];

    const addEventListener = (arr: Array<SwipeCallback>, callback: SwipeCallback) => {
        arr.push(callback);
    };

    const handleGesture = (event: TouchEvent) => {
        if (touchEndX.value < touchStartX.value && (Math.max(touchStartY.value, touchEndY.value) - Math.min(touchStartY.value, touchEndY.value)) < options.value.directinoal_threshold) {
            onSwipeLeft.forEach(callback => callback(event));
        }

        if (touchEndX.value > touchStartX.value && (Math.max(touchStartY.value, touchEndY.value) - Math.min(touchStartY.value, touchEndY.value)) < options.value.directinoal_threshold) {
            onSwipeRight.forEach(callback => callback(event));
        }

        if (touchEndY.value < touchStartY.value && (Math.max(touchStartX.value, touchEndX.value) - Math.min(touchStartX.value, touchEndX.value)) < options.value.directinoal_threshold) {
            onSwipeUp.forEach(callback => callback(event));
        }

        if (touchEndY.value > touchStartY.value && (Math.max(touchStartX.value, touchEndX.value) - Math.min(touchStartX.value, touchEndX.value)) < options.value.directinoal_threshold) {
            onSwipeDown.forEach(callback => callback(event));
        }

        if (touchEndY.value === touchStartY.value) {
            onTap.forEach(callback => callback(event));
        }
    }
    return {
        onSwipeLeft: (callback: SwipeCallback) => addEventListener(onSwipeLeft, callback),
        onSwipeRight: (callback: SwipeCallback) => addEventListener(onSwipeRight, callback),
        onSwipeUp: (callback: SwipeCallback) => addEventListener(onSwipeUp, callback),
        onSwipeDown: (callback: SwipeCallback) => addEventListener(onSwipeDown, callback),
        onTap: (callback: SwipeCallback) => addEventListener(onTap, callback)
    }
}

例常使用:

const { onSwipeLeft, onSwipeRight } = useSwipe(document.body);
onSwipeLeft((e:TouchEvent) => {
    //logic
});

Answer 5

http://stackoverflow.com/a/69617795/460084“phoenix 回答:

function registerTouchEvent(element, callback) {
  const THRESHOLD = 50 // Minimum difference in pixels at which a swipe gesture is detected

  let startEvent, endEvent
  element.addEventListener( touchstart , event => startEvent = event)
  element.addEventListener( touchend , event => { endEvent = event; callback(getSwipeDirection()) })

  function getSwipeDirection() {
    if (!startEvent.changedTouches || !endEvent.changedTouches) return

    const start = startEvent.changedTouches[0]
    const end = endEvent.changedTouches[0]
    if (!start || !end) return

    const horizontalDifference = start.screenX - end.screenX
    const verticalDifference = start.screenY - end.screenY

    if (Math.abs(horizontalDifference) > Math.abs(verticalDifference)) 
      return horizontalDifference >= THRESHOLD ?  left  : (horizontalDifference <= -THRESHOLD ?  right  :  click )


    return verticalDifference >= THRESHOLD ?  up  : (verticalDifference <= -THRESHOLD ?  down  :  click )
  }
}

使用:

registerTouchEvent(document, callback)

<编码>查询将接收一个插座左/右/上/上/下/立克。

How to use

友情链接