**html**
<div id="app" class="box"
v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名
v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传,fn 为函数名
v-swipeleft="{fn:vuetouch,name:'左滑'}"
v-swiperight="{fn:vuetouch,name:'右滑'}"
v-swipeup="{fn:vuetouch,name:'上滑'}"
v-swipedown="{fn:vuetouch,name:'下滑'}"
>{{ name }}</div>
**js**
kim=new Vue({
el:"#app",
data:{
name:"开始"
},
methods:{
vuetouch:function(s,e){
this.name=s.name;
}
}
});
function vueTouch(el,binding,type){
var _this=this;
this.obj=el;
this.binding=binding;
this.touchType=type;
this.vueTouches={x:0,y:0};
this.vueMoves=true;
this.vueLeave=true;
this.longTouch=true;
this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;
this.obj.addEventListener("touchstart",function(e){
_this.start(e);
},false);
this.obj.addEventListener("touchend",function(e){
_this.end(e);
},false);
this.obj.addEventListener("touchmove",function(e){
_this.move(e);
},false);
};
vueTouch.prototype={
start:function(e){
this.vueMoves=true;
this.vueLeave=true;
this.longTouch=true;
this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY};
this.time=setTimeout(function(){
if(this.vueLeave&&this.vueMoves){
this.touchType=="longtap"&&this.vueCallBack(this.binding.value,e);
this.longTouch=false;
};
}.bind(this),1000);
},
end:function(e){
var disX=e.changedTouches[0].pageX-this.vueTouches.x;
var disY=e.changedTouches[0].pageY-this.vueTouches.y;
clearTimeout(this.time);
if(Math.abs(disX)>10||Math.abs(disY)>100){
this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);
if(Math.abs(disX)>Math.abs(disY)){
if(disX>10){
this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);
};
if(disX<-10){
this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);
};
}else{
if(disY>10){
this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);
};
if(disY<-10){
this.touchType=="swipeup"&&this.vueCallBack(this.binding.value,e);
};
};
}else{
if(this.longTouch&&this.vueMoves){
this.touchType=="tap"&&this.vueCallBack(this.binding.value,e);
this.vueLeave=false
};
};
},
move:function(e){
this.vueMoves=false;
}
};
Vue.directive("tap",{
bind:function(el,binding){
new vueTouch(el,binding,"tap");
}
});
Vue.directive("swipe",{
bind:function(el,binding){
new vueTouch(el,binding,"swipe");
}
});
Vue.directive("swipeleft",{
bind:function(el,binding){
new vueTouch(el,binding,"swipeleft");
}
});
Vue.directive("swiperight",{
bind:function(el,binding){
new vueTouch(el,binding,"swiperight");
}
});
Vue.directive("swipedown",{
bind:function(el,binding){
new vueTouch(el,binding,"swipedown");
}
});
Vue.directive("swipeup",{
bind:function(el,binding){
new vueTouch(el,binding,"swipeup");
}
});
Vue.directive("longtap",{
bind:function(el,binding){
new vueTouch(el,binding,"longtap");
}
});
有朋友提出一个bug :“v-for循环 生命周期后 获取不到新值 比如更新了数据”
这个问题是v-for的就地复用机制导致的,也就是可以复用的dom没有重复渲染,官方给出的方法是需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
我的解决方案是directive的钩子函数参数有一个vnode,这个是虚拟dom节点,给vnode.key赋予一个随机id,强制dom刷新。
Vue.directive("tap",{
bind:function(el,binding,vnode){
vnode.key = randomString()//randomString会返回一个随机字符串
new vueTouch(el,binding,"tap");
}
});
最新的版本已经在GitHub更新 https://github.com/904790204/vue-touch
原文来源:https://blog.csdn.net/qq_17757973/article/details/78112976?locationNum=7&fps=1
其实是将百度touch.js引入到项目中 然后有滑动等事件 在事件中调用方法,使用提供的v-touch标签 就可以触动手势 根据不同的手势调用方法即可,swipeleft左滑事件
由于弹框比较长,所以弹出的时候前面的弹框内容需要滑动,但是背景需要禁止滚动,所以使用watch 监听,弹窗出现禁止滚动,弹框消失可以滚动。
Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素,先把html代码写出来,如下所示
vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
主要介绍 uniapp关闭左侧滑动返回功能,无论安卓还是IOS,系统都自带左侧滑动返回上一页的功能,在实际开发中,我们可能需要关闭系统侧边滑动返回的功能,在uni-app中如何实现呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!