vue移动端的左右滑动事件详解_vue移动端左右滑动,vue手机滑动事件资源-CSDN下载

vue

26 浏览量 2021-01-19 14:41:41 上传评论收藏 38KB PDF 举报

资源推荐

资源详情

资源评论

vue移动端的左右滑动事件详解移动端的左右滑动事件详解

本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下

<!DOCTYPE html>

<html>

<head>

<style>

*{padding: 0;margin: 0;}

body {background: #EEEEEE;}

.box {text-align: center;}

.btn {

position: relative;

width: 70%;

height: 40px;

margin: 150px auto;

border-radius: 20px;

background: #333333;

}

.btn-move {

position: absolute;

left: 0;

top: 0;

width: 40px;

height: 40px;

border-radius: 20px;

background: #ededed;

}

.tt {

font-size: 20px;

color: #008000;

text-align: center;

margin-top: 50px;

}

</style>

</head>

<body>

<slide-release></slide-release>

</div>

<div>

<span ref='btnImg' class="btn-move"

@touchstart='touchStart'

@touchmove='touchMove'

@touchend='touchEnd'

:style="slideEffect"

</span>

</div>

<p class="tt" v-show="isShow">你滑动成功了！</p>

</div>

</script>

Vue.component('slide-release',{

template:'#slide',

data:function(){

return {

isShow:false,

startX:0,//开始触摸的位置

moveX:0,//滑动时的位置

endX:0,//结束触摸的位置

disX:0,//移动距离

slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38617851

粉丝: 4

vue移动端的左右滑动事件详解

最新资源