watch项目学习笔记-------------touch事件监听： touchstart touchend

<div class="watch-nav-wrap" id="watch-nav-wrap">----------------->最外层div
<div class="handle-up-down">----------------------------->内层div1
<span style="color:#fff;font-size:12px;line-height: 20px;">运动排名：第五名   记步：8000步</span>

</div>
<ul>----------------------------------------------------->内存ul
<li>
<div v-if="userAgent === 'ios'">
<a v-bind:href="'tel:'+userInfoList.user_tel">
<img src="../../assets/images/[email protected]"/>
<span>{{call}}</span>
</a>
</div>
<div v-else>
<a href="javascript:;" id="callDevBtn1">
<img src="../../assets/images/[email protected]"/>
<span>{{call}}</span>
</a>
</div>
</li>
<li>
<a href="javascript:;" id="contactDevBtn1">
<img src="../../assets/images/[email protected]"/>
<span>{{contactXW}}</span>
</a>
</li>
<li>
<a href="javascript:;" v-on:click="setListenBtn">
<img src="../../assets/images/icon_guanailingting.png"/>
<span>{{guanailingting}}</span>
</a>
</li>
<li>
<router-link :to="{name: 'watchHistoryLocation', params: {userInfoList: userInfoList}}">
<img src="../../assets/images/[email protected]"/>
<span>{{locaInfo}}</span>
</router-link>
</li>
<li>
<router-link :to="{name: 'watchSecurityFence'}">
<img src="../../assets/images/[email protected]"/>
<span>{{secureArea}}</span>
</router-link>
</li>
<li>
<router-link :to="{name: 'watchCareRemind'}">
<img src="../../assets/images/icon_naozhong.png"/>
<span>{{naozhong}}</span>
</router-link>
</li>
</ul>
</div>

mounted(){
this.touchEvent();------------------->挂载事件
}

touchEvent () {----------------------->滑动事件监听以及滑动方向判断---->根据滑动方向进行相应的逻辑操作
var startFlag = false
var endFlag = false
var startHandle = false
var endHandle = false
var startx, starty, endx, endy -------------------->定义局部变量
// 获得角度
function getAngle (angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI
}
// 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动-------------------------->滑动方向判断
function getDirection (startx, starty, endx, endy, startFlag, endFlag) {
var result = 0
var angx = endx - startx
var angy = endy - starty
// 如果滑动距离太短
if (startFlag === true && endFlag === true) {
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result
}
var angle = getAngle(angx, angy)
if (angle >= -135 && angle <= -45) {
result = 1
} else if (angle > 45 && angle < 135) {
result = 2
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3
} else if (angle >= -45 && angle <= 45) {
result = 4
}
} else {
result = 5
return result
}
return result
}
// 手指接触屏幕
var watchNavWrap = document.querySelector('.watch-nav-wrap')
watchNavWrap.addEventListener('touchstart', function (e) {
var classNameStr = e.touches[0].target.offsetParent.className
var classNameArr = classNameStr.split(' ')
console.log(classNameArr[0])
if (classNameArr[0] === 'watch-nav-wrap') {
startFlag = true
endHandle = false
} else {
startFlag = false
}
startx = e.touches[0].pageX ---------------------->计算起始pos坐标
starty = e.touches[0].pageY
if (classNameArr[0] === 'handle-up-down') {
startFlag = true
startHandle = true
}
}, false)
// 手指离开屏幕
watchNavWrap.addEventListener('touchend', function (e) {
var classNameStr = e.changedTouches[0].target.offsetParent.className
var classNameArr = classNameStr.split(' ')
console.log(classNameArr[0])
if (classNameArr[0] === 'watch-nav-wrap') {
endFlag = true
endHandle = false
} else {
endFlag = false
}
endx = e.changedTouches[0].pageX------------------------->计算结束pos坐标
endy = e.changedTouches[0].pageY
if (classNameArr[0] === 'handle-up-down') {
endFlag = true
endHandle = true
}
var direction = getDirection(startx, starty, endx, endy, startFlag, endFlag)------->计算滑动方向
switch (direction) {
case 0:
console.log('未滑动')
if (startHandle === true && endHandle === true) {
if ($('#watch-nav-wrap').hasClass('scrollDown')) {
$('#watch-nav-wrap').removeClass('scrollDown').addClass('scrollUp')
} else if ($('.watch-nav-wrap').hasClass('scrollUp')) {
$('#watch-nav-wrap').removeClass('scrollUp').addClass('scrollDown')
} else {
$('#watch-nav-wrap').addClass('scrollUp')
}
}
break
case 1:
console.log('向上')
$('#watch-nav-wrap').removeClass('scrollDown').addClass('scrollUp')-------------->jQuery实现css效果切换
break
case 2:
console.log('向下')
$('#watch-nav-wrap').removeClass('scrollUp').addClass('scrollDown')
break
case 3:
console.log('向左')
break
case 4:
console.log('向右')
break
case 5:
console.log('其他区域')
break
default:
}
}, false)
},

设置css效果：
.scrollDown{
animation:scrollCss01 .4s;
-webkit-animation:scrollCss01 .4s;
animation-fill-mode: forwards;
}
@-webkit-keyframes scrollCss01 /* Safari and Chrome */
{
0% {bottom:0px;}
100% {bottom:-92px;}
}
.scrollUp{
animation:scrollCss02 .4s;
-webkit-animation:scrollCss02 .4s;
animation-fill-mode: forwards;
}
@-webkit-keyframes scrollCss02 /* Safari and Chrome */
{
0% {bottom:-92px;}
100% {bottom:0px;}

}

watch项目学习笔记-------------touch事件监听： touchstart touchend

猜你喜欢