由於移動端的屏幕尺寸限制，很多App都的列表項使用了的滑動顯示刪除按鈕，然后點擊刪除功能。網頁端可以采用插件方式很容易實現。
這里采用Vue+Weui+vue2-touch-events插件實現。
- Vue是一套用於構建用戶界面的漸進式框架。使用起來很容易上手。https://vuejs.bootcss.com/guide/
- Weui是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，簡單易用。https://weui.io/
- vue2-touch-events是基於Vue2的移動端瀏覽器Touch事件插件，https://www.npmjs.com/package/vue2-touch-events
我們都知道滑動事件由按下、移動、松開3個步驟組成。要在按下的時候記錄手指按下的屏幕位置，並判斷是否有已經打開的列表，有的話先關閉；在滑動的過程中，根據當前觸摸的坐標計算滑動距離，移動相應的列表，當滑動記錄大於完全打開的記錄的一半時自動打開列表；當松開時滑動距離小於完全打開的記錄的一半時吧列表關閉。效果如下：
很簡單，直接貼代碼，
HTML代碼：
<div class="weui-panel">
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div v-for="record in records" class="weui-cells">
<div class="weui-cell weui-cell_swiped">
<div ref="ls" class="weui-cell__bd">
<div class="weui-cell" v-touch:start="listSwipeStart()" v-touch:moving="listSwipeMoving()" v-touch:end="listSwipeEnd()">
<div class="weui-cell__hd">
<i class="fas fa-folder color-orange"></i>
</div>
<div class="weui-cell__bd">
{{record}}
</div>
<div class="weui-cell__ft">
</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_orange" href="javascript:">修改</a>
<a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">刪除</a>
</div>
</div>
</div>
<div v-if="records == null || records.length==0" class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_access weui-cell_example">
<div class="weui-cell__bd weui-cell_primary" style="text-align:center">
<p>無數據！</p>
</div>
</div>
</div>
</div>
</div>
</div>
主內容區域是一個weui面板，面板的主體方式weui-cell組件用於顯示列表。
由於要顯示修改刪除按鈕，所以嵌套一層weui-cell：外層的weui-cell的bd里嵌套一個weui-cell，里面的weui-cell是列表內容，外層weui-cell的ft里放修改刪除按鈕，正常時內層的weui-cell遮掉外層的ft，當滑動時移動內層的weui-cell外層的按鈕就可顯示出來了。
給內層的weui-cell綁定vue2-touch-events插件的3個事件，v-touch:start，v-touch:moving，v-touch:end。
Js代碼：
<script>
const Counter = {
el: ".page",
data() {
return {
swipe: {
startX: 0,
startY:0,
maxDistance: 136
}
}
},
mounted: function () {
for (var i = 1; i <= 20; i++) {
this.records.push("n" + i);
}
},
methods: {
listSwipeStart() {
that = this;
return function (direction, event) {
if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
//清楚已打開的列表
for (i = 0, len = that.$refs.ls.length; i < len; i++) {
if (that.$refs.ls[i].style != "") that.$refs.ls[i].style = "";
}
//記錄起始位置
that.swipe.startX = direction.changedTouches[0].pageX;
that.swipe.startY = direction.changedTouches[0].pageY;
}
};
},
listSwipeMoving() {
that = this;
return function (direction, event) {
if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;
var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;
//左滑
if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {
if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "transform: translateX(" + distanceX + "px)";
else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";
}
}
};
},
listSwipeEnd() {
that = this;
return function (direction, event) {
if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {
var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;
var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;
//左滑
if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {
if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "";
else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";
}
}
};
},
}
};
var page = new Vue(Counter);
</script>