touchmove 在移动端中用户在屏幕上移动手指时发生的事件
touchstart 在移动端中用户触碰在屏幕上时发生的事件
touchend 在移动端中用户离开屏幕时发生的事件
<ul>
<li
v-for="(item, i) in Initials"
:key="i"
@touchstart="sstart(item)"
@touchend="send(item)"
@touchmove="smove(item)"
>
{{ item }}
</li>
</ul>
sstart(loc) {
this.starts = true;
this.num = event.target.innerText; // 通过触摸屏幕拿到刚开始触摸的值
},
smove(loc) {
if (this.starts) {
var juli = event.touches[0].clientY - this.top;
this.danshu = juli / event.touches[0].target.clientHeight;
}
event.preventDefault();
},
send(loc) {
this.starts = false;
},
先获取ul标签到顶部的距离,然后再通过event.touches[0].clientY 获取手指触摸到屏幕的y值,再利用y的值减去距离顶部的值,然后用这个值除去li标签的高,通过event.touches[0].target.clientHeight拿到高,
this.num = this.Initials[Math.floor(this.danshu) - 1];
//this.Initials为[A,B,C,D,...]数组,当触摸滑动的时候clienY改变就会拿到相应位置的值
这样就可以实现一个滑动的效果