javascript - @composi/gestures 滑动点亮元素

Question

我正在尝试使用以下库通过我的 lit-element 实现手势:https://github.com/composi/gestures

在我的文件顶部，我有以下内容:

import { gestures } from '@composi/gestures'
gestures();

然后在我的渲染函数中我有:

render() {
 return html`
  <div class="tablet-menu " id="tablet-menu-T">
  <div class="tablet-menu-body" on-swipe="${this._swipe}">
....

但是 _swipe 函数从未被调用，所以它似乎没有注册滑动命令。

我做错了什么？

Answer 1

这是使用了错误的事件处理程序语法。

  <div class="tablet-menu-body" on-swipe="${this._swipe}">

使用 @ 前缀代替 on- 前缀:

  <div class="tablet-menu-body" @swipe="${this._swipe}">

参见:https://lit-html.polymer-project.org/guide/template-reference#event-listeners

注意:您不需要为 LitElement 类方法使用箭头函数。它们会自动使用正确的 this 引用进行调用。