0

这个实时片段构建了一个使用iron-list. 列表中的每个项目都有一个删除按钮，单击该按钮可从列表中删除该项目。当一个项目被移除时，所有下一个项目都会向上移动，但最后一个显示的项目会保留而不是消失。

根据这个 stackoverflow，只需触发resizeIron-list 上的事件就足够了。但在我的片段中，这没有帮助。iron-resize官方iron-list 文档中的或 notifyResize 函数都没有。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
        <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        
        // ---- any resize call doesn't help a thin ---
		this.$.list.fire('iron-resize');
		this.$.list.fire('resize');
		this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

4

2 回答 2

1

“很简单！根元素的css display属性，在iron-list的模板中，一定不能设置。然后将你的flexbox包裹在另一个简单的div中。”

这是解决的实时片段：

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
         <!--YOU MUST NO CHANGE THE CSS DISPLAY PROPERTY OF THE ROOT ELEMENT OF THE TEMPLATE!-->
        <div>

         <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
         </div>

        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

于 2017-11-15T10:36:19.153 回答
1

您可能会在最后一项上找到“隐藏”属性。由于在滚动项目时不会删除项目，因此铁列表会重复使用项目。这个 CSS 规则应该把它隐藏起来

#list [hidden] { display: none; }
于 2017-11-15T19:41:24.743 回答