(十)如果实现滑动展示菜单效果

效果如下

该功能类似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

更多精彩，请关注我的公众号！