移动端实现首字母列表滑动过程(自己用的一个实现方法 可能比较简易,希望多见谅)

这篇博客详细介绍了在移动端开发中如何利用touchstart、touchmove和touchend事件来实现滑动效果。通过监听这些触摸事件,可以捕捉用户的触摸开始、移动和结束动作,并根据手指在屏幕上的移动计算出相应的比例,从而动态更新显示的内容,达到滑动选择的目的。示例代码展示了如何在列表元素上应用这些事件,实现了一个简单的滑动选择功能。
摘要由CSDN通过智能技术生成

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改变就会拿到相应位置的值

这样就可以实现一个滑动的效果

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值