vue父页面中含子页面滑动，滑动结束，底部组件进行滑动

作者：hsc686 | 来源：互联网 | 2023-10-10 13:31

详见效果地址：https:pan.baidu.coms1Yin2q0Fh_6AQJTlbie7QMw使用1.v-touch实现滑动效果，父级页面滑动，当父级含有子

详见效果地址： https://pan.baidu.com/s/1Yin2q0Fh_6AQJTlbie7QMw

使用

1.v-touch 实现滑动效果，父级页面滑动，当父级含有子页面需要滑动功能hasClass("sm_img"），需要判断是否继续父级滑动，有的话子页面先滑动，通过upB去判断

if($(imgShowChild[that.childNum]).children().children().hasClass("sm_img")&&that.upB !=3)
2.当滑动结束后，底部组件向上滑，通过加入一个蒙版显示隐藏，使滑动事件失效， main.js引入上下滑动的自定义指令，
滑动事件在微信浏览器中有兼容问题，我是通过使用监听window滑动事件，兼容浏览器下滑事件

mounted(){          

          //使用监听window滑动事件，兼容浏览器下滑事件
          window.addEventListener('scroll',this.handleScroll)
 },

methods: {
           handleScroll(e){
                console.log(e)
                $(".menban").hide()
        },
          vuetouch:function(s,e){
            this.name="下滑";
            $(".menban").hide()
       },
}


            <div class="menban" :style="setHeight" v-swipedown="{fn:vuetouch}" >                
                
            div>

vue样式

css样式

.index_home{
    overflow: hidden;
}
/*蒙版的样式设置*/
.index_home .menban{
    position: absolute;
    z-index: 999;
    bottom: 0;
    display: none;
}

.index_home .bannerBox{
    width: 10rem;
    /*overflow: hidden;*/
}
.index_home .page_com{
    overflow: hidden;
}
.index_home .page_com .layered{
    width: 10rem;
    position: relative;
    /*overflow: hidden;*/
}
.index_home .page_com .layered img{
    width: 100%;
    height: 100%;
}
.index_home .layered .text{
    position: absolute;
    top: 30%;
    color:#fff;
    width: 100%;
    font-size: 25px;
    line-height: 45px;
    text-align: center;    
    /*opacity: 0;*/
    transform: translate(0,50px);
    /* transition: opacity 4s, transform 1.5s 1.7s;*/
}
.index_home .show .layered .text{
    animation:myfirst 2s;
    opacity: 1;
    transform: translate(0,0);
    
}
.index_home .layered.page2 .text{
    line-height: 30px;
}
.index_home .layered .text span{
    color: #fff;
}
.index_home .layered.black_text .text span{
    color: #1E1E1E;
}
.index_home .layered.black_text .text .title span{
    font-size: 35px;
}

.index_home .layered.page2 .text {
    top: 90px;
}
.index_home .layered .con{
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}
.index_home .conBox li .layered.page2>.child_img{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    height: 14.6rem;
    opacity: 0;
}

.conBox li .sm_img{
    position: absolute;
    height: 350px;
    width: 355px;
    margin: 0 auto;
    top: 185px;
    left: 50%;
    margin-left: -177.5px;
    opacity: 0;
    overflow: hidden;
    z-index: 99;
}
.conBox li .show .sm_img{
    animation:myfirst 3s;
    opacity: 1;
    /*top: 0;*/
    transform: translate(0,0);
}
.sm_img .showChlid li{
    width: 100%;
    height: 350px;
    position: relative;
}
.index_home .show{
    position: relative;
}
.index_home .page2>.turnDown{
    position: absolute;
    top: 350px;
    right: 30px;
    opacity: 0;
}
.index_home .show .page2>.turnDown{
    position: absolute;
    top: 350px;
    right: 30px;
    width: auto;
    animation: myturnDown 2s ease-in-out 0 infinite alternate;
}
.index_home .show .layered.page2>.sm_img{
    animation: myfirst 2s ease-in-out 1s forwards;
}
.index_home .show .layered.page2>.child_img{
    animation: myfirst 2s ease-in-out 1s forwards;
}
.index_home .layered.page2 .next_page{
    position: absolute;
    top: 12.6rem;
    left: 50%;
    margin-left: -36px;
    width: 72px;
    height: 25px;
    z-index: 11;
    opacity: 0;
}

.index_home .show .layered.page2 .next_page{
    animation: myfirst 2s ease-in-out 2s forwards;
}
.index_home .layered.page2 .sm_img .next_page{
    top: 310px;
    margin-left: -46px;
}
.index_home .show .layered.page2 .sm_img .next_page{
    animation: myfirst 2s ease-in-out 2s forwards;
}
.index_home .layered .turnDown{
    color: #fff;
    font-weight: 100;
    display: block;
    margin-top: 94px;
    width:2rem;
    margin-left: 4rem;
    transform:  scaleX(2) rotate(90deg);
    animation: myturnDown 2s ease-in-out 2s infinite alternate;
}
.index_home .layered.page2 .turnDown{
    width: auto;
}
.index_home .layered.black_text .turnDown{
    color: #000;
}

.index_home #footer{
    /*display: none;*/
}
/*动画效果显示加上浮*/
@keyframes myfirst
{
    from {
        opacity: 0;
        transform: translate(0,50px);
    }
    to {
        opacity: 1;
        transform: translate(0,0);
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    from {
        opacity: 0;
        transform: translate(0,50px);
    }
    to {
        opacity: 1;
        transform: translate(0,0);
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    from {
        opacity: 0;
        transform: translate(0,50px);
    }
    to {
        opacity: 1;
        transform: translate(0,0);
    }
}

@-o-keyframes myfirst /* Opera */
{
    from {
        opacity: 0;
        transform: translate(0,50px);
    }
    to {
        opacity: 1;
        transform: translate(0,0);
    }
}

/*引导下滑效果*/
@keyframes myturnDown
{
    0% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(0,10px) scaleX(2) rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
}

@-moz-keyframes myturnDown /* Firefox */
{
    0% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(0,10px) scaleX(2) rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
}

@-webkit-keyframes myturnDown /* Safari 和 Chrome */
{
    0% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(0,10px) scaleX(2) rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
}

@-o-keyframes myturnDown /* Opera */
{
    0% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(0,10px) scaleX(2) rotate(90deg);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) scaleX(2) rotate(90deg);
    }
}

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import VueTouch from 'vue-touch'

//滑动事件的功能--start
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");
    }
});
//滑动事件的功能--end

推荐阅读

console
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
java
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
java
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
java
计算机网络初识及通信流程分析

本文介绍了计算机网络的定义和通信流程，包括客户端编译文件、二进制转换、三层路由设备等。同时，还介绍了计算机网络中常用的关键词，如MAC地址和IP地址。 ... [详细]

蜡笔小新 2023-12-13 16:50:29
process
flowable工作流流程变量_信也科技工作流平台的技术实践

1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]

蜡笔小新 2023-12-13 10:17:15
go
macOS命令行创建Android模拟器

macOS下不安装AndroidStudio使用VSCode来开发Flutter应用使用命令行创建和管理Android模拟器设备avdmanageravdmanager 是一种命令 ... [详细]

蜡笔小新 2023-10-17 16:14:54
go
树莓派小车3——安卓客户端

项目地址https:github.comffmydreamWiCar界面做的很难看，美工方面实在不在行。重点是按钮触摸事件的处理，这里搬了RepeatListener项目代码，例 ... [详细]

蜡笔小新 2023-10-17 15:08:33
go
关于extjs开发实战pdf的信息

本文目录一览：1、extjs实用开发指南2、本 ... [详细]

蜡笔小新 2023-10-17 13:23:21
go
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
go
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
buffer
C#生成随机数的三种方法及其问题分析

本文介绍了C#中生成随机数的三种方法，并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法，但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数，进一步突显了这个问题。文章指出，随机数生成在任何编程语言中都是必备的功能，但Random类生成的随机数并不可靠。最后，提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]

蜡笔小新 2023-12-14 14:15:30
java
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
java
小程序自动授权和手动接入的方式及操作步骤

本文介绍了小程序支持的两种接入方式：自动授权和手动接入，并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换，以及手动接入后如何下载代码包和提交审核。 ... [详细]

蜡笔小新 2023-12-11 18:21:09
go
手把手教你使用GraphPad Prism和Excel绘制回归分析结果的森林图

本文介绍了使用GraphPad Prism和Excel绘制回归分析结果的森林图的方法。通过展示森林图，可以更加直观地将回归分析结果可视化。GraphPad Prism是一款专门为医学专业人士设计的绘图软件，同时也兼顾统计分析的功能，操作便捷，可以帮助科研人员轻松绘制出高质量的专业图形。文章以一篇发表在JACC杂志上的研究为例，利用其中的多因素回归分析结果来绘制森林图。通过本文的指导，读者可以学会如何使用GraphPad Prism和Excel绘制回归分析结果的森林图。 ... [详细]

蜡笔小新 2023-12-10 18:32:57
go
iOS开发中的内存泄漏检测和解决方法，以及最能挣钱的行业和选行业技巧

本文介绍了iOS开发中检测和解决内存泄漏的方法，包括静态分析、使用instruments检查内存泄漏以及代码测试等。同时还介绍了最能挣钱的行业，包括互联网行业、娱乐行业、教育行业、智能行业和老年服务行业，并提供了选行业的技巧。 ... [详细]

蜡笔小新 2023-12-09 10:07:05

hsc686

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章