如何在聚合物中正确加载js

Question

我的移动设备上的应用有问题。当我在浏览器j上刷新页面时，第一次没有工作，但是在我平移和缩小脚本之后可以正常工作。

这是html文件：

 <div class="userLogged" on-click="userMenu">
    <iron-icon icon="vaadin:user"></iron-icon>
 </div>

这是我的js：

userMenu(e) {
    e.stopPropagation();
    var menu = this.shadowRoot.querySelector('.userMenu');
    if (menu.classList.contains('slideRight'))
       menu.classList.remove('slideRight');
    else
    menu.classList.add('slideRight');
 }

我的网页的完整代码

Answer 1

快速旁注：您的课程名称应为PageControl，与class PageControl extends Polymer.Element一样 - 应与dom-module的id匹配。

我会创建一个属性userMenuClass并按照这样做：

<template>
    ...
    <div class="userLogged" on-click="userMenu"> ... </div>
    ...
    <div class$="[[userMenuClass]]"></div>  <!-- Note the $ after class. You need this to get binding to work properly. -->
...
</template>
<script>
    ....
    static get properties() {
        return {
            'userMenuClass': {
                type: String,
                value: () => 'userMenu slideRight'
            }
        }
    }
    ...
    userMenu (e) {
        let menuClass = 'userMenu';
        if (this.userMenuClass.indexOf('slideRight') == -1)  {
            menuClass += ' slideRight';
        }
        this.set('userMenuClass', menuClass);
    }
</script>