(十)如果實現滑動展示選單效果

效果如下

該功能類似mac 備忘錄列表的滑動展示刪除選單效果。

主要通過使用js的wheel實現。

WheelEvent.deltaX 只讀 返回double值，該值表示滾輪的橫向滾動量。 如果deltaX大於0，則為左滑，小於0，則為右滑。

通過監聽列表項的wheel事件，並判斷deltaX的值，然後新增open-left樣式，來實現滑動效果。

主要程式碼如下： Html:

<ul>
    <li @wheel="wheelEvent" :class="['item',openLift?'open-left':''">
        <span>內容</span>
        <button>刪除</button>
    </li>
</ul>
複製程式碼

Js:

wheelEvent($event) {
    this.openLift = $event.deltaX > 0;
}
複製程式碼

Css:

.item{
    transition: margin-left 0.4s ease-in-out;
}
.open-left{
    margin-left: -80px;
}
複製程式碼

部落格地址: alibt.top

更多精彩，請關注我的公眾號！