any-touch 一个手势库
demo
drawer的基础逻辑
- 增加2个div, 一个是当drawer隐蔽的时刻翻开隐蔽的触发开关, 一个是drawer自身.
- 对把手和drawer举行举行fixed定位到界面的右边边沿.
- 调解drawer和把手的款式, 这里把手主假如要设置背景色为通明, 详细款式看下面代码.
- 用any-touch分别给把手和drawer增加pan(拖拽)手势.
- 当drawer隐蔽时, 拖拽把手向右, 经由过程pan返回的deltaX(每次触发拖拽的x偏移)举行drawer的拖拽, 让其向右边挪动以显现.
- 向左拖拽drawer, 让其隐蔽, 当隐蔽部份占drawer宽度凌驾一半的时刻, 松开手, 那末抽屉自动隐蔽到左边, 反之, drawer完整显现.
注: 本文仅用来解说drawer的基础原理, 另有许多边境处置惩罚的细节人人能够后续自行补充作为演习.
代码
<!-- 触发把手 -->
<div class="com-drawer-handler" id="j-com-drawer-handler"></div>
<!-- 抽屉 -->
<div class="com-drawer" id="j-com-drawer">
<img class="avator" src="https://s.cdpn.io/profiles/user/406915/80.jpg?1511329408" width="100%">
<p align="center">
铁皮饭盒
</p>
<a class="github" href="https://github.com/383514580/any-touch">github : any-touch</a>
<div>
<script src="https://unpkg.com/any-touch/dist/AnyTouch.umd.js"></script>
.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事宜