移動端左滑右滑元件

wade3po發表於2019-02-02
元件

很久沒釋出文章了，一方面工作原因，一方面是惰性開始出來了。希望能繼續堅持菜雞之路。

最近有個需求，移動端有導航，需要左滑右滑的時候就能切換導航，跟輪播一樣的效果，但是輪播內容少，而且是一次性載入資料。而需求是很多型別，每個型別有非常多的列表，如果使用輪播，一次性載入資料太多，再加上分頁，那就完全行不通。

自己寫了個左滑右滑的元件。我一直覺得寫元件最重要的就是理解原理和理清思路。

當我們觸控到螢幕的時候，會觸發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個人筆記 公眾號

相關文章