大家好,又见面了,我是你们的朋友全栈君。
之前开发一个小游戏在手机和ipad上都可以正常使用,后期需要扩展h5业务,发现uni-app中touch事件失效了,使用jquery相关事件代替实现了。
原代码:
<button type="default" class="btn"
:style="'transform: translateX('+Distance+'px)'"
@touchstart="touchtStarEvent"
@touchmove="touchMoveEvent"
@touchend="touchEndEvent">
滑动按钮
</button>
//开始事件
touchtStarEvent(e){
this.ClientX = e.changedTouches[0]['clientX'];
this.isMove = false;
},
//移动事件
touchMoveEvent(e){
let _dir = e.changedTouches[0]['clientX']-this.ClientX;
if(_dir<0&&_dir>-50){
this.isMove = true;
this.Distance = _dir;
}
},
//结束事件
touchEndEvent(e){
if(this.isMove){
this.Distance = 0;
this.isMove = false;
}
},
引用jquery插件
// #ifdef H5
import jQuery from '@/utils/jquery-3.5.1.min.js'
// #endif
jQuery下载地址:点击下载
由于在h5中,touch事件无触发,这里通过jquery的mousedown、mousemove、mouseup、mouseout代替实现touchstart、touchmove、touchend事件。获取鼠标的移动参数后,转成原touch事件所需要的changedTouches数据,这样直接触发原事件即可。
// #ifdef H5
var _isDown = false,
that = this;
//开始事件
jQuery(document).on('mousedown', '.btn', function(e){
if(!_isDown) _isDown = true;
that.touchtStarEvent({
changedTouches: [
{"clientX": e.pageX, "clientY": e.pageY}
]
});
});
//移动事件
jQuery(document).on('mousemove', '.btn', function(e){
if(_isDown){
that.touchMoveEvent({
changedTouches: [
{"clientX": e.pageX, "clientY": e.pageY}
]
});
}
});
//结束事件
jQuery(document).on('mouseup', '.btn', function(e){
if(_isDown) _isDown = false;
that.touchEndEvent({
changedTouches: [
{"clientX": e.pageX, "clientY": e.pageY}
]
});
});
//结束事件
jQuery(document).on('mouseout', '.btn', function(e){
if(_isDown) _isDown = false;
that.touchEndEvent({
changedTouches: [
{"clientX": e.pageX, "clientY": e.pageY}
]
});
});
// #endif
以上是个人项目中移动物体示例,仅供参考。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150809.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...