成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

不到30行, 用any-touch實(shí)現(xiàn)一個drawer

source / 423人閱讀

摘要：一個手勢庫預(yù)覽的基本邏輯添加個一個是當(dāng)隱藏的時候打開隱藏的觸發(fā)開關(guān)一個是本身對把手和進(jìn)行進(jìn)行定位到界面的右側(cè)邊緣調(diào)整和把手的樣式這里把手主要是要設(shè)置背景色為透明具體樣式看下面代碼用分別給把手和添加拖拽手勢當(dāng)隱藏時拖拽把手向右通過返回的每

any-touch 一個手勢庫

demo

預(yù)覽

drawer的基本邏輯

添加2個div, 一個是當(dāng)drawer隱藏的時候打開隱藏的觸發(fā)開關(guān), 一個是drawer本身.

對把手和drawer進(jìn)行進(jìn)行fixed定位到界面的右側(cè)邊緣.

調(diào)整drawer和把手的樣式, 這里把手主要是要設(shè)置背景色為透明, 具體樣式看下面代碼.

用any-touch分別給把手和drawer添加pan(拖拽)手勢.

當(dāng)drawer隱藏時, 拖拽把手向右, 通過pan返回的deltaX(每次觸發(fā)拖拽的x偏移)進(jìn)行drawer的拖拽, 讓其向右側(cè)移動以顯示.

向左拖拽drawer, 讓其隱藏, 當(dāng)隱藏部分占drawer寬度超過一半的時候, 松開手, 那么抽屜自動隱藏到左側(cè), 反之, drawer完全顯示.

注: 本文僅用來講解drawer的基本原理, 還有很多邊界處理的細(xì)節(jié)大家可以后續(xù)自行補(bǔ)充作為練習(xí).

代碼 







   
  
  

    鐵皮飯盒
  

  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)`;
});
關(guān)于vue和react版本

這里是用純js實(shí)現(xiàn)的版本, 如果用vue或者react代碼量會更少, 有興趣的同學(xué)可以自行實(shí)現(xiàn)或者需要的人多, 我會再寫個vue版本的例子(react我也不會, 我得找同事幫寫個demo, 嘿). 太晚了,寫的倉促, 如果錯誤請指出, 我會立即修改.

typescript

any-touch由typescript編寫, 如有興趣歡迎訪問我的其他幾篇關(guān)于代碼講解的文章:

用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?
用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.config.js & npx
用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103069.html

相關(guān)文章

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個知識點(diǎn)如何配置如何配置使用運(yùn)行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    roundstones 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個知識點(diǎn)如何配置如何配置使用運(yùn)行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    cod7ce 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

    摘要：一個手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫開發(fā)常用手勢有哪些不到行用實(shí)現(xiàn)一個簡單看下架構(gòu)實(shí)現(xiàn)輸入格式統(tǒng)一為了同時支持鼠標(biāo)和設(shè)備我們第一步把種設(shè)備產(chǎn)生數(shù)據(jù)統(tǒng)一化統(tǒng)一化后的數(shù)據(jù)我們統(tǒng)一叫他個基礎(chǔ)個快捷包含個字段個基礎(chǔ)字 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    BigNerdCoding 評論0 收藏0

  • 用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?

    這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發(fā)一款支持pc和手機(jī)端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & r...

    raise_yang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<