Question

问题：如何选择多张纸卡，并知道在用户长按/点击卡片时选择了哪些纸张。

描述：我有动态生成的纸卡，我使用模板Dom-repeat在页面上渲染它们。目前，我在每张纸卡上都包含了复选框，以便用户可以选择与纸卡相关的复选框。这样，屏幕上的用户可以选择多张卡片，我可以在其上执行下一个功能。

我想更好的用户体验是，用户可以点击或点击纸卡，并且能够按住他的手指/鼠标说.5秒并且能够选择该卡而不是复选框样式选择

如果我能够获得如何使用多张纸卡选择的工作代码片段，那么我将能够为该应用程序提供更好的用户体验。

当前代码段：（这里我使用纸质图标按钮来获取用户选择的纸卡元素。）

<template is="dom-repeat" items="{{itemsList}}" as="item">
  <paper-card style="float:center; width: 95%" class$="       
    {{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}">
   <paper-icon-button  icon="icons:arrow-drop-down" style="color: 
    grey;" id$="bttn#{{item._id}}" item="[[item]]" on- 
     tap="doSomeDiffAction">
   </paper-icon-button>
       <iron-image class="pad"
                    src="../images/image1"
                    preload
                    sizing="contain"
                    style="" >
                </iron-image>
     </paper-card>
    </template>

我希望拥有的内容（如下所示） - ＆gt;

 <template is="dom-repeat" items="{{itemsList}}" as="item">
  <paper-card style="float:center; width: 95%" class$="       
    {{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}"

   something-like-user-pressed-longed="
        callFunctionUserPressedForLong"

  >
   <paper-icon-button  icon="icons:arrow-drop-down" style="color: 
    grey;" id$="bttn#{{item._id}}" item="[[item]]" on- 
     tap="doSomeDiffAction">
   </paper-icon-button>
       <iron-image class="pad"
                    src="../images/image1"
                    preload
                    sizing="contain"
                    style="" >
                </iron-image>
     </paper-card>
    </template>

在dom-module中的脚本javascript函数中，我可以提取所选的纸卡

function callFunctionUserPressedForLong(e){
   var id = e.model.item._id;
   console.log('User pressed for long time on the paper-card = '+ id);
}

function doSomeDiffAction(e){
   var id = e.model.item._id;
   console.log('Not a long press event. User taped or clicked paper card button. Do different action e.g. open popup. = '+ 
   id);
}

由于

Answer 1

您必须使用Polymer的on-down和on-up事件，并亲自观察这两个事件之间的时间差。

在下面的示例中，on-down和on-up事件功能对于两个组件（纸卡和纸图标按钮）都是相同的。在on-down函数（_onDown）中，当前时间保存到变量中。开启方式（_onUp）的内部是检测点击/单击按钮的方式（如果开启和关闭之间的时间差为<0.5s ，并且事件的目标是具有{{1} }，然后在纸卡内的某个地方长按（包括纸图标按钮）。

id=bttn#{{item._id}}

_onDown(e) {
  this.startTime = Date.now()
}
_onUp(e) {
  let id = e.model.item._id;
  //stopPropagation because this is otherwise called twice - from paper-card and from paper-icon-button
  e.stopPropagation()
  let id = "1"
  if (Date.now() - this.startTime > 500) {
    console.log(`long press somewhere inside paper-card :: id=${id}`);
  } else if (e.target.id == `bttn#${id}`) {
    console.log(`Not a long press event. User taped or clicked paper card button :: id=${id}`);
  }
}

Polymer 2.0捕获长按动态生成的纸卡

1 个答案: