不到30行, 用any-touch实现一个drawer

source 发布于2019-08-23 16:28 / 280人阅读

摘要：一个手势库预览的基本逻辑添加个一个是当隐藏的时候打开隐藏的触发开关一个是本身对把手和进行进行定位到界面的右侧边缘调整和把手的样式这里把手主要是要设置背景色为透明具体样式看下面代码用分别给把手和添加拖拽手势当隐藏时拖拽把手向右通过返回的每

any-touch 一个手势库

demo

预览

drawer的基本逻辑

添加2个div, 一个是当drawer隐藏的时候打开隐藏的触发开关, 一个是drawer本身.

对把手和drawer进行进行fixed定位到界面的右侧边缘.

调整drawer和把手的样式, 这里把手主要是要设置背景色为透明, 具体样式看下面代码.

用any-touch分别给把手和drawer添加pan(拖拽)手势.

当drawer隐藏时, 拖拽把手向右, 通过pan返回的deltaX(每次触发拖拽的x偏移)进行drawer的拖拽, 让其向右侧移动以显示.

向左拖拽drawer, 让其隐藏, 当隐藏部分占drawer宽度超过一半的时候, 松开手, 那么抽屉自动隐藏到左侧, 反之, drawer完全显示.

注: 本文仅用来讲解drawer的基本原理, 还有很多边界处理的细节大家可以后续自行补充作为练习.

代码






   
  
  
    铁皮饭盒
  
  github : any-touch

.com-drawer-handler {
  height: 100vh;
  background: rgba(252, 252,252, 0);
  width: 45px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

.com-drawer {
  padding: 30px;
  height: 100vh;
  min-width: 10vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
  .avator {
    touch-action: none;
    display: block;
    width: 60%;
    border-radius: 100%;
    margin: 15px auto;
  }
  .github {
    padding: 5px 15px;
    background: #000;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 6px;
    margin-top: 60px;
  }
}

.animated {
  transition: all 200ms;
}

// 抽屉部分
let offsetX = 0;
const elDrawer = document.getElementById("j-com-drawer");
const minX = 0 - elDrawer.offsetWidth;
const at = new AnyTouch(elDrawer);
at.on("panmove", ({ deltaX }) => {
  offsetX += deltaX;
  if (0 <= offsetX) {
    offsetX = 0;
  }
  elDrawer.style.transform = `translateX(${offsetX}px)`;
});
at.on("panend", () => {
  offsetX = minX / 2 < offsetX ? 0 : minX;
  elDrawer.style.transform = `translateX(${offsetX}px)`;
  elDrawer.classList.toggle(animated, true);
});

// 把手
const elHandler = document.getElementById("j-com-drawer-handler");
const atHandler = new AnyTouch(elHandler, { isPreventDefault: false });
atHandler.on("panmove", ({deltaX}) => {
  offsetX+= deltaX;
  offsetX = 0 < offsetX ? 0 : offsetX;
  elDrawer.style.transform = `translateX(${offsetX}px)`;
});

关于vue和react版本

这里是用纯js实现的版本, 如果用vue或者react代码量会更少, 有兴趣的同学可以自行实现或者需要的人多, 我会再写个vue版本的例子(react我也不会, 我得找同事帮写个demo, 嘿). 太晚了,写的仓促, 如果错误请指出, 我会立即修改.

typescript

any-touch由typescript编写, 如有兴趣欢迎访问我的其他几篇关于代码讲解的文章:

用typescript开发手势库 - (1)web开发常用手势有哪些?
用TypeScript开发手势库 - (2)tsconfig.json & rollup.config.js & npx
用TypeScript开发手势库 - (3)统一化Mouse和Touch事件

海外云主机 GPU服务器用js或jquery实现添加行用java实现一个线程池 java实现行增加服务器有一个盘看不到

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103069.html

用TypeScript开发手势库 - (2)tsconfig.json & rollup.c

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库统一化和事件不到行用实现一个标题有点长今天的标题有点长但不难讲的都是工具配置和使用就个知识点如何配置如何配置使用运行项目所在的命令注为了阅读体验我把为什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

roundstones 2019-08-23 16:15 评论0 收藏0
用TypeScript开发手势库 - (2)tsconfig.json & rollup.c

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库统一化和事件不到行用实现一个标题有点长今天的标题有点长但不难讲的都是工具配置和使用就个知识点如何配置如何配置使用运行项目所在的命令注为了阅读体验我把为什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

cod7ce 2019-08-02 16:08 评论0 收藏0
用TypeScript开发手势库 - (3)统一化Mouse和Touch事件

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库开发常用手势有哪些不到行用实现一个简单看下架构实现输入格式统一为了同时支持鼠标和设备我们第一步把种设备产生数据统一化统一化后的数据我们统一叫他个基础个快捷包含个字段个基础字 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

BigNerdCoding 2019-08-23 16:20 评论0 收藏0
用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0