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

推荐阅读

js
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
main
在类中定义数组时出错 - Error on defining arrays in class

Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]

蜡笔小新 2023-12-14 17:38:12
main
Go GUIlxn/walk 学习3.菜单栏和工具栏的具体实现

本文介绍了使用Go语言的GUI库lxn/walk实现菜单栏和工具栏的具体方法，包括消息窗口的产生、文件放置动作响应和提示框的应用。部分代码来自上一篇博客和lxn/walk官方示例。文章提供了学习GUI开发的实际案例和代码示例。 ... [详细]

蜡笔小新 2023-12-12 20:56:55
main
使用nodejs爬取b站番剧数据，计算最佳追番推荐

本文介绍了如何使用nodejs爬取b站番剧数据，并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据，以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]

蜡笔小新 2023-12-14 20:44:52
main
Open judge C16H: Magical Balls 快速幂+逆元问题解析

本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]

蜡笔小新 2023-12-14 12:03:27
js
关于cuowu类的错误提示和使用AdjustmentListener的问题

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

蜡笔小新 2023-12-13 22:09:56
int
Python正则表达式学习记录及常用方法

本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]

蜡笔小新 2023-12-13 16:37:19
main
python创建一个窗口_等一个大佬啊要求用python创建一个窗口，窗口按钮功能是创建一个球体或立方体。明天上课之前交给我...

展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]

蜡笔小新 2023-12-13 16:26:09
main
Java高并发程序设计学习-线程安全的概念与synchronized

本文介绍了Java高并发程序设计中线程安全的概念与synchronized关键字的使用。通过一个计数器的例子，演示了多线程同时对变量进行累加操作时可能出现的问题。最终值会小于预期的原因是因为两个线程同时对变量进行写入时，其中一个线程的结果会覆盖另一个线程的结果。为了解决这个问题，可以使用synchronized关键字来保证线程安全。 ... [详细]

蜡笔小新 2023-12-13 15:43:03
main
从零学Java（10）之方法详解，喷打野你真的没我6！

本文介绍了从零学Java系列中的第10篇文章，详解了Java中的方法。同时讨论了打野过程中喷打野的影响，以及金色打野刀对经济的增加和线上队友经济的影响。指出喷打野会导致线上经济的消减和影响队伍的团结。 ... [详细]

蜡笔小新 2023-12-13 13:44:16
main
热血合击脚本辅助工具及随机数生成器源码分享

本文分享了一个热血合击脚本辅助工具及随机数生成器源码。游戏脚本能够实现类似真实玩家的操作，但信息量有限且操作不可控。热血合击脚本辅助工具可以帮助玩家自动刷图、换图拉怪等操作，并提供了雷电云手机的扩展服务。此外，还介绍了使用mt_rand函数作为随机数生成器的代码示例。 ... [详细]

蜡笔小新 2023-12-13 12:50:33
main
[大整数乘法] java代码实现

本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]

蜡笔小新 2023-12-13 11:21:32
js
flowable工作流流程变量_信也科技工作流平台的技术实践

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

蜡笔小新 2023-12-13 10:17:15
main
Java学习笔记之面向对象编程（OOP）

本文介绍了Java学习笔记中的面向对象编程（OOP）内容，包括OOP的三大特性（封装、继承、多态）和五大原则（单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则）。通过学习OOP，可以提高代码复用性、拓展性和安全性。 ... [详细]

蜡笔小新 2023-12-13 08:44:30
main
Go语言实现堆排序的详细教程

本文主要介绍了Go语言实现堆排序的详细教程，包括大根堆的定义和完全二叉树的概念。通过图解和算法描述，详细介绍了堆排序的实现过程。堆排序是一种效率很高的排序算法，时间复杂度为O(nlgn)。阅读本文大约需要15分钟。 ... [详细]

蜡笔小新 2023-12-12 16:23:00

hsc686

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

Tags | 热门标签

RankList | 热门文章