vue touch事件使用

去哪儿网 Alphabet.vue文件

<template><ul class="list"><li
      class="item"v-for="item of letters":key="item":ref="item"@touchstart.prevent="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"@click="handleLetterClick">{{item}}</li></ul>
</template><script>
export default {name: 'CityAlphabet',props: {cities: Object},computed: {letters () {const letters = []for (let i in this.cities) {letters.push(i)}return letters}},data () {return {touchStatus: false,startY: 0,timer: null}},updated () {this.startY = this.$refs['A'][0].offsetTop},methods: {handleLetterClick (e) {this.$emit('change', e.target.innerText)},handleTouchStart () {this.touchStatus = true},handleTouchMove (e) {if (this.touchStatus) {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(() => {const touchY = e.touches[0].clientY - 79const index = Math.floor((touchY - this.startY) / 20)if (index >= 0 && index < this.letters.length) {this.$emit('change', this.letters[index])}}, 16)}},handleTouchEnd () {this.touchStatus = false}}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor
</style>

vue touch事件使用相关推荐

JavaScript移动端缩放位移 touch 事件
爬过不少坑 , 总结下基于原生 JavaScript touch 事件实现移动端缩放位移下面有在 Vue 项目中的实现方法仅供参考闲话少叙看代码: <!DOCTYPE h ...
JavaScript中 Touch 事件详解
1. touch 事件简介 touchstart 事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发: touchmove 事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间 ...
ViewGroup的Touch事件分发(源码分析)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,View的touch事件分发相对比较简单,可参考 View的Touch事件分发(一.初步了解) View的Touch事 ...
View的Touch事件分发(二.源码分析)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 主要分析View的dispatchTouchEvent()方法和onTou ...
View的Touch事件分发(一.初步了解)
Android中Touch事件的分发又分为View和ViewGroup的事件分发,先来看简单的View的touch事件分发. 一次完整的Touch事件序列为: ACTION_DOWN -> AC ...
Android Touch事件传递机制二：单纯的（伪生命周期）这个清楚一点
转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...
vue 绑定事件，获取元素对象
vue 绑定事件,获取元素对象例如: <img v-bind:src="item.fmguid" v-on:error="imgerror($event)&quo ...
Android Touch事件原理加实例分析
Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. ...
UITableViewCell有关处理touch事件的问题
在UITableViewCell上的子视图如果其自身处理了Touch事件,则在点击这个子视图时代理的didSelectRow函数无法被触发(cell不认为自己被点击了,连高亮都没有). 如果想要解决这 ...

vue touch事件使用

vue touch事件使用

vue touch事件使用相关推荐

最新文章

热门文章