很久沒發布文章了，一方面工作原因，一方面是惰性開始出來了。希望能繼續堅持菜雞之路。
最近有個需求，移動端有導航，需要左滑右滑的時候就能切換導航，跟輪播一樣的效果，但是輪播內容少，而且是一次性載入資料。而需求是很多態別，每個型別有非常多的列表，如果使用輪播，一次性載入資料太多，再加上分頁，那就完全行不通。
自己寫了個左滑右滑的元件。我一直覺得寫元件最重要的就是理解原理和理清思路。
當我們觸控到螢幕的時候，會觸發touchstar方法，獲取起始的x座標值startx，在手指移動過程中，會觸發touchmove方法，獲得手指當前的x座標值currentx。currentx-startx就是移動的距離，讓當前父元素相對定位，然後隨著移動定位left的值。這樣就實現了乙個元素左滑右滑的效果。
接著考慮當手指鬆開的時候觸發touchend方法，獲取endx，endx減去startx或者是移動過程中的距離，大於0就是手指向右滑動，小於0就是向左滑動。然後在結束的時候把相對定位的父元素left變成0.
因為是元件，我們把左滑還是右滑返回，把可能需要用到的移動過程中的距離也返回。最後，我們在移動一點點距離的時候不一定要左滑右滑，所以需要乙個最小的滑動距離。
export default
}, components: {},
mounted() ,
methods: ,
touchmove(e),
touchend(e)else if(this.movemar <(-this.margin || -100))
this.movemar = 0;
}, }}
.touch-movue-left-right
touch左滑右滑
原理 1 當開始乙個touchstart事件的時候，獲取此刻手指的橫座標startx和staery 2 當觸發touchmove事件的時候，再獲取此時手指的橫座標moveendx和縱座標moveendy 最後，通過兩次獲取的座標差值來判斷手指在手機螢幕上的滑動方向。body on touchstar...
jQuery實現移動端左滑刪除功能
這裡，我們可以直接使用jquery來實現該效果。基本原理 完整的示例 如下 charset utf 8 移動端左滑刪除 右滑恢復效果title src script html body,div,p,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset...
移動端實現橫滑
在移動端中我們我們經常會遇見 橫滑 的需求，也就是 橫向滾動 開使我們可能會想到用各種觸控事件，至少我的第一反應是這樣，但其實有更簡單的辦法！也就是使用overflow屬性 方法一 使用overflow屬性來解決，像下面這樣即可實現橫滑 ul li 如果說想要顯示 乙個半 li，其實大可不必擔心怎麼...