vue整屏滑动组件

Posted 2020-10-31 阿宜

前几天做了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‘  //留在第一页
　　　　　　　　}
　　　　　　};
　　　　};

       }