如何将HTML5 touch事件滑动到底及滑动方向修改为自定义长尾词？

本文共计269个文字，预计阅读时间需要2分钟。

javascripttouchEvent(data) { startClientY: 0, // 屏幕开始滑动位置 endClientY: 0, // 屏幕结束滑动位置 movedirection: 'CENTER', // 滑动方向 lastscrolltop: 0, // 上一次滚动距离 handleStart(e) { this.lastscrolltop=0; // 解决再次开始的问题 }}

touchEvent

data(){ startClientY:0,//屏幕开始滑动位置 endClientY:0,//屏幕结束滑动位置 movedirection:'CENTER',//滑动方向 lastscrolltop:0,//上一次的滚动距离 }, handleStart (e){ this.lastscrolltop = 0;//解决再次开始滑动时与scrollTop数据相同导致判断失误问题 this.startClientY = e.touches[0].clientY; console.log("开始位置:",this.startClientY) }, handleMove (e) { var dom = $(".contract_list"); var scrollTop = dom.scrollTop() this.endClientY = e.touches[0].clientY; console.log("结束位置:",this.endClientY) //判断是否滚动到底部 if (scrollTop - this.lastscrolltop > 0) { this.lastscrolltop = dom.scrollTop() console.log("继续滚动，scrollTop:", scrollTop) } else if (scrollTop != 0 && this.lastscrolltop != 0 && scrollTop - this.lastscrolltop == 0) { console.log("到底了!") /** * 这里可以做一些操作 */ this.lastscrolltop = dom.scrollTop(); } //判断手指滑动方向 if(e.touches[0].clientY < this.startClientY){ this.movedirection = "UP"; }else if(e.touches[0].clientY > this.startClientY){ this.movedirection = "DOWN"; }else{ this.movedirection = "CENTER"; } console.log('手指方向:',this.movedirection) this.startClientY = e.touches[0].clientY;//解决开始点击时判断有误问题 },