前几天做了vue整屏滑动，因为我的容器中使用了v-for所以我在updated中获取dom;
updated(){
var outer = this.$refs.outerdiv; //获取视图容器
var inner = this.$refs.content; //获取包裹内容容器
var innercont = this.$refs.innercont; //获取滑动内容
var x1=0,x2=0,index=0,innercontw=innercont.offsetHeight; //初始化坐标点数据，内容下标，滑动高度
outer.addEventListener("touchstart",start,false); //移动端touch事件手指按下
outer.addEventListener("touchmove",move,false); //移动
outer.addEventListener("touchend",end,false); //离开
function start(e){
x1=e.touches[0].clientY; //传入event对象 获取手指按下坐标点 因为是上下滑动所以获取的是Y轴坐标
x2=0; //移动距离为0
};
function move(e){
x2=e.touches[0].clientY; //手指移动时 获取移动距离
};
function end(e){
if(x2==0){ //手指离开时判断移动距离 若等于零则不滑动
return false;
};
if(x1>x2){ //若离开时按下坐标大于移动之后坐标
index++; //内容下标递增
inner.style.top=-(innercontw*index)+'px'; //向上滑动距离为内容高度*当前下标
if(index>=6){ //如果下标大于等于内容下标长度
index=6; //内容停留在当页
inner.style.top=-(innercontw*(index-1))+'px';
}
}else if(x1<x2){ //如果按下坐标小于移动后坐标
index--; //下标递减
inner.style.top=-(innercontw*index)+'px'; //向下滑动距离为内容高度*当先下标
if(index<=0){ //如果下标<=0
index=0;
inner.style.top='0px' //留在第一页
}
};
};
}