效果如下
该功能类似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
更多精彩,请关注我的公众号!