移动端左滑右滑组件

移动端左滑右滑组件

很久没发布文章了,一方面工作原因,一方面是惰性开始出来了。希望能继续坚持菜鸡之路。

最近有个需求,移动端有导航,需要左滑右滑的时候就能切换导航,跟轮播一样的效果,但是轮播内容少,而且是一次性加载数据。而需求是很多类型,每个类型有非常多的列表,如果使用轮播,一次性加载数据太多,再加上分页,那就完全行不通。

自己写了个左滑右滑的组件。我一直觉得写组件最重要的就是理解原理和理清思路。

当我们触摸到屏幕的时候,会触发touchStar方法,获取起始的X坐标值startX,在手指移动过程中,会触发touchMove方法,获得手指当前的X坐标值currentX。CurrentX-startX就是移动的距离,让当前父元素相对定位,然后随着移动定位left的值。这样就实现了一个元素左滑右滑的效果。

接着考虑当手指松开的时候触发touchEnd方法,获取endX,endX减去startX或者是移动过程中的距离,大于0就是手指向右滑动,小于0就是向左滑动。然后在结束的时候把相对定位的父元素left变成0.

因为是组件,我们把左滑还是右滑返回,把可能需要用到的移动过程中的距离也返回。最后,我们在移动一点点距离的时候不一定要左滑右滑,所以需要一个最小的滑动距离。


<template>
 <div class="">
   <divclass="touch-movue-left-right"
       @touchstart="touchStart($event)"
       @touchend="touchEnd($event)"
       @touchmove="touchMove($event)"
   :style="{'left': moveMar +'px'}">
   <slot></slot>
   </div>
 </div>
</template>



export default {
 props: ['moveJudge', 'moveDistance','margin'],
 data() {
   return {
     startX: 0,
     moveMar: 0
   }
 },
 components: {},
 mounted() {

 },
 methods: {
   touchStart(e){
     this.startX =e.targetTouches[0].pageX;
   },
   touchMove(e){
     this.moveMar =e.targetTouches[0].pageX - this.startX;
     this.$emit('moveDistance',this.moveMar);
   },
   touchEnd(e){
     if(this.moveMar > (this.margin ||100)){
       this.$emit('moveJudge', 'right');
     }else if(this.moveMar <(-this.margin || -100)){
       this.$emit('moveJudge', 'left');
     }
     this.moveMar = 0;
   },
 }
}



.touch-movue-left-right{
 position: relative;
 width: 100%;
 background: #42b983;
}
复制代码

可以自己使用一下,顺便提一下,上拉加载下拉刷新之前是分开的,增加了一个一起的,加上左滑右滑,已经发布npm:

www.npmjs.com/package/wad…

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c55014ff265da2dd638cb56

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101140.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • CTK 插件框架介绍

    CTK 插件框架介绍CTKPluginFramework:IntroductionTheCTKPluginFrameworkcanshortlybedescribedasadynamiccomponentsystemforC++.CTK插件框架可以简要的描

  • centos7 apache 安装配置步骤[通俗易懂]

    centos7 apache 安装配置步骤[通俗易懂]1检查、删除、安装rpm-qa|grephttpd//检查是否安装apacherpm-e包名–nodeps//若有则删除PS:我没有删除,直接用的服务器原来的。yuminstallhttpd//安装,根据提示,输入Y即可安装成功2启动、测试systemctlstarthttpd//restart重启stop停止3查看 apache状…

  • 【C#】C#获得计算机硬件信息和操作系统信息,ManagementObjectSearcher[通俗易懂]

    【C#】C#获得计算机硬件信息和操作系统信息,ManagementObjectSearcher[通俗易懂]ManagementObjectSearcherC#获得硬盘信息C#获得CPU信息C#获得主板信息C#获得网卡信息C#获得…

  • 服务器推送技术

    服务器推送技术需求与背景之前所有的请求都是浏览器发起,浏览器本身没有接受请求的能力。所以一些特殊需求都是用ajax轮询的方式来实现的。比如:股价展示页面实时的获取股价更新赛事的文字直播,实时更新赛况通过页

  • 华为模拟器eNSP安装史上最全。。

    华为模拟器eNSP安装史上最全。。**华为模拟器基本使用**首先下载模拟工具eNSPeNSP(EnterpriseNetworkSimulationPlatform)是一款由华为提供的免费的、可扩展的、图形化操作的网络仿真工具平台,主要对企业网络路由器、交换机进行软件仿真,完美呈现真实设备实景,支持大型网络模拟,让广大用户有机会在没有真实设备的情况下能够模拟演练,学习网络技术。网站地址https://supp…

  • EXCEL 出错 8000401a

    EXCEL 出错 8000401a检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下错误:8000401a先用骨哥狗了一会,没解决方案,又用摆渡,也没找到方法,最后还是看微软的帮助解决了问题:1.打开DCOM配置,取消交互式用户,使用启动用户2.安全中附足够权限,不知道用户是谁就写Everyonehttp://suppo…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号