polymer中如何正确加载js

Question

我的应用程序在移动设备上有问题。当我在浏览器上刷新页面时，js 第一次不工作，但在我平移和缩小脚本后将工作。

这里是 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

一个简短的旁注：你的 class 的名称应该是 PageControl，就像 class PageControl extends Polymer.Element 中一样——应该匹配 dom 的 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>

polymer中如何正确加载js

How to load js correctly in polymer

polymer

polymer-2.x