vue移动端的左右滑动事件详解
本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta content="telephone=no" name="format-detection">
<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>
<div id="box">
<slide-release></slide-release>
</div>
<script type="text/x-template" id="slide">
<div>
<div class="btn" ref='remove'>
<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>
<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"
}
},
methods:{
touchStart:function(ev) {
ev = ev || event;
ev.preventDefault();
// console.log(ev.targetTouches);
// console.log(ev.changedTouches);
if(ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
this.startX = ev.touches[0].clientX; // 记录开始位置
}
},
touchMove:function(ev) {
ev = ev || event;
ev.preventDefault();
let btnWidth = this.$refs.remove.offsetWidth; //$refs 减少获取dom节点的消耗
let btnImg = this.$refs.btnImg.offsetWidth;
console.log(ev.targetTouches);
console.log(ev.changedTouches);
if(ev.touches.length == 1) {
//滑动时距离浏览器左侧的距离
this.moveX = ev.touches[0].clientX;
//实时的滑动的距离-起始位置=实时移动的位置
this.disX = this.moveX-this.startX;
if(this.disX<0 || this.disX == 0) {
this.slideEffect = 'transform:translateX(0px)';
}else if(this.disX>0){
this.slideEffect = 'transform:translateX('+this.disX+'px)';
// 最大也只能等于删除按钮宽度
if(this.disX>=btnWidth) {
this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
}
}
}
},
touchEnd:function(ev){
ev = ev || event;
ev.preventDefault();
let btnWidth = this.$refs.remove.offsetWidth;
let btnImg = this.$refs.btnImg.offsetWidth;
// console.log(ev.changedTouches);
if(ev.changedTouches.length == 1) {
let endX = ev.changedTouches[0].clientX;
this.disX = endX-this.startX;
console.log(this.disX,'this.disX')
console.log((btnWidth/2),'btnWidth/2');
if(this.disX < (btnWidth/2)) {
this.slideEffect = 'transform:translateX(0px)';
}else {
this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)";
//让字段显示出来，或者写你需要的逻辑
this.isShow = true
}
}
}
}
})
var vm = new Vue({
el:'#box',
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们
相关推荐
-
Vue实现移动端左右滑动效果的方法
1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入: import VueTouch from 'vue-touch
-
vue2.0移动端滑动事件vue-touch的实例代码
Vue-touch的使用 有时候我们不止需要有返回键,也要有手势滑动切换页面的功能时,这个时候vue-touch就派上用场了 API地址: https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入: import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) 用法如下: //html代码
-
移动端滑动切换组件封装 vue-swiper-router实例详解
具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis
-
vue移动端实现手机左右滑动入场动画
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 app.vue <template> <div id="app"> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive" class="Router">&
-
vue2.0 better-scroll 实现移动端滑动的示例代码
写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应
-
vue实现一个移动端屏蔽滑动的遮罩层实例
在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.prevent > </div> 对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10;
-
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本
-
vue自定义移动端touch事件之点击、滑动、长按事件
用法: **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名 v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传,fn 为函数名 v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{f
-
vue移动端的左右滑动事件详解
本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://unpkg.com/vue"></script> <meta name="viewport" c
-
vue回到顶部监听滚动事件详解
本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)"&
-
Vue 实现从小到大的横向滑动效果详解
本文实例讲述了Vue 实现从小到大的横向滑动效果.分享给大家供大家参考,具体如下: 最近项目中遇到一个需求,需要实现横向滑动,并且在滑动过程中,中间的大,两边的小,通过参考其他的人代码以及自己的实践,终于做出来啦,给大家做个参考. 实现效果如下图: 先来说一下实现思路吧: 整体思路:采用vue+vue-awesome-swiper完成 因为我们的项目是采用vue来做的,所以在经过很多的考量和比较以后,选择了vue-awesome-swiper插件来辅助,从这个名字上也能看出,这个插件是支持vue
-
Vue.js组件通信之自定义事件详解
组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>
-
Vue自定义事件(详解)
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp
-
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet
-
vue移动端实现手指滑动效果
本文实例为大家分享了vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下 滑动时候黄色块宽度跟着变化 通过touch点击实现 目前感觉宽度变化有点问题,还在思考中 下面上代码: <template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="t
-
Vue-cli 移动端布局和动画使用详解
vue-cli(重点) vue-cli 是用来管理 vue 项目的工具,可以使用 vue-cli 快速创建项目.启动项目.编译项目等操作. 常说的vue全家桶指:vue-cli.vue-router.vuex.vue-resource. vue的单文件组件扩展名是.vue文件,需要借助vue-loader,才能被正常解析. vue-cli 3 (新版本) 如果之前安装过低版本的 vue-cli ,那么命令行执行: npm uninstall vue-cli -g 然后安装 npm install
-
vue组件生命周期钩子使用示例详解
目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
-
vue实现At人文本输入框示例详解
目录 知识前置 需求分析 实现 创建能够输入文本的文本框 添加at功能 后记 知识前置 基于vue手把手教你实现一个拥有@人功能的文本编辑器(其实就是微信群聊的输入框) Selection 对象,表示用户选择的文本范围或插入符号的当前 developer.mozilla.org/zh-CN/docs/… contenteditable 是一个枚举属性,表示元素是否可被用户编辑. developer.mozilla.org/zh-CN/docs/… 需求分析 文本框能够输入文本(太简单了) 能够a