专栏首页coding个人笔记移动端左滑右滑组件

移动端左滑右滑组件

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

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

当我们触摸到屏幕的时候,会触发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:

https://www.npmjs.com/package/wade-ui

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个Promise之基础、异步

    其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是...

    wade
  • CSS之BFC

    BFC或许很多人都没听过这个名词,不过我们在写样式的时候一直在使用BFC的概念。BFC的解释是:块格式化上下文(Block Formatting Context...

    wade
  • this的指向

    This的指向问题一直是JavaScript的一大核心,很多人都是觉得了解了,但是又模模糊糊。简单概括就是,this的指向永远是指向调用这个this的对象。下面...

    wade
  • Spark2.x学习笔记:4、Spark程序架构与运行模式

    4、 Spark程序架构与运行模式 4.1 Spark程序最简架构 所有的Spark程序运行时,主要由两大类组件Driver和Excutor构成。 每个Spar...

    程裕强
  • EurekaClient自动装配及启动流程解析

    老规矩,先看spring.factories文件,其中引入了一个配置类EurekaDiscoveryClientConfigServiceBootstrapCo...

    Java学习录
  • Spark学习笔记01-基础

    Spark是一个分布式集群计算系统,类似Hadoop提供了强大的分布式计算能力,相比过去的批量处理系统,提供了处理更大规模数据的能力。Spark提供了Java、...

    大江小浪
  • 重磅亮相KubeCon China,腾讯云为你揭秘国内云商最大容器集群

    6月24日至26日,由Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNa...

    腾讯云serverless团队
  • 重磅亮相KubeCon China,腾讯云为你揭秘国内云商最大容器集群

    6月24日至26日,由Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNa...

    腾讯技术工程官方号
  • K8S Pod 内抓包快速定位网络问题

    在使用 Kubernetes 时,可能会遇到一些网络问题。当通过检查配置与日志无法排查错误时,这时就需要抓取网络数据包,但是Pod内一般不会安装tcpdump命...

    YP小站
  • 国际聋人日:腾讯发起“天籁行动”,开放AI降噪技术助力听障人群“听得清”

        9月27日是国际聋人日,腾讯公益基金会联合腾讯多媒体实验室,在深圳召开新闻发布会,宣布发起“天籁行动”,面向公益开发者、设备厂商、相关机构免费开放腾讯...

    腾讯音视频实验室

扫码关注云+社区

领取腾讯云代金券