我正试图让我的元素回到原点。 拖动存储它走了多远，所以我想我可以告诉它回到0 1像素。 然而，这不起作用（它由touchend触发）。当我查看开发工具时，我看到{{drag}}值是正确的，但if语句未被触发。
任何帮助都将不胜感激。
function bounceToZero() {
if({{drag}} != 0) {
document.querySelector('pull-to-action').drag = {{drag}} - 1;
if({{drag}} != 0) {
setTimeout('bounceToZero()',1000);
}
}
}
感谢您的帮助。
编辑： 这是完整元素
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html">
<polymer-element attributes="action distance container color" name="pull-to-action">
<template>
<style>
:host {
display: block;
position: absolute;
width: calc(100% - 8px);
text-align:center;
z-index:99;
}
.refreshIcon {
background-color:white;
border-radius: 50%;
border: 1px solid {{color}};
padding: 8px;
top: calc(({{drag}}px - 50px) / 3);
color: {{color}};
opacity: calc({{drag}} / {{distance}});
transform: rotate({{drag}}deg);
filter: grayscale({{desat}}%);
-webkit-filter: grayscale({{desat}}%);
}
</style>
<span flex><core-icon class="refreshIcon" icon="icons:refresh"></core-icon></span>
<script>
window.addEventListener('load', function() {
var dragObs = 0;
var lastTouchY = 0;
var startTouchY = 0;
var endTouchY = 0;
var desat = 100;
var touchstartHandler = function(e) {
if (e.touches.length != 1) return;
lastTouchY = e.touches[0].clientY;
startTouchY = e.touches[0].clientY;
document.querySelector('pull-to-action').width = window.innerWidth;
}
var touchmoveHandler = function(e) {
var touchY = e.touches[0].clientY;
var touchYDelta = touchY - lastTouchY;
lastTouchY = touchY;
endTouchY = e.touches[0].clientY;
if (document.getElementById('{{container}}').scrollTop == 0) {
dragObs = endTouchY - startTouchY;
desat = 100 - ((dragObs / {{distance}}) * 100);
document.querySelector('pull-to-action').desat = desat;
document.querySelector('pull-to-action').drag = endTouchY - startTouchY;
}
if (document.getElementById('{{container}}').scrollTop == 0 && touchYDelta > 0) {
e.preventDefault();
return;
}
if (document.getElementById('{{container}}').scrollTop == 0 &&dragObs > 0) {
e.preventDefault();
return;
}
}
var touchendHandler = function(e) {
if (document.getElementById('{{container}}').scrollTop == 0 && endTouchY - startTouchY >= {{distance}}) {
{{action}};
document.querySelector('pull-to-action').drag = {{distance}};
dragObs = {{distance}}
setTimeout('bounceToZero()',2000);
} else {
function bounceToZero() {
if({{drag}} != 0) {
document.querySelector('pull-to-action').drag = {{drag}} - 1;
if({{drag}} != 0) {
setTimeout('bounceToZero()',1000);
}
}
}
}
}
document.addEventListener('touchstart', touchstartHandler, false);
document.addEventListener('touchmove', touchmoveHandler, false);
document.addEventListener('touchend', touchendHandler, false);
});
</script>
</template>
<script>
Polymer({
action: 'alert("You need to set the action attribute")',
distance: '100',
container: 'body',
drag: '0',
desat: '100',
color: '#ccc'
});
</script>
</polymer-element>
答案 0 :(得分：1)
我认为你不能在剧本里面使用模板
function bounceToZero() {
if(drag != 0) {
document.querySelector('pull-to-action').drag = drag - 1;
if(drag != 0) {
setTimeout('bounceToZero()',1000);
}
}
}
如果需要
，请添加this上下文进行拖动
答案 1 :(得分：0)
好的，我设法让它工作，这就是我做的。
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-icon/core-icon.html">
<polymer-element attributes="action distance container color" name="pull-to-action">
<template>
<style>
:host {
display: block;
position: absolute;
width: calc(100% - 8px);
text-align:center;
z-index:99;
}
.refreshIcon {
background-color:white;
border-radius: 50%;
border: 1px solid {{color}};
padding: 8px;
top: calc(({{drag}}px - 50px) / 3);
color: {{color}};
opacity: calc({{drag}} / {{distance}});
transform: rotate({{drag}}deg);
filter: grayscale({{desat}}%);
-webkit-filter: grayscale({{desat}}%);
}
</style>
<span flex><core-icon class="refreshIcon" icon="icons:refresh"></core-icon></span>
<script>
var dragObs = 0;
function bounceToDistance() {
if (dragObs > 150) {
dragObs = dragObs - 3;
setTimeout('document.querySelector("pull-to-action").drag = dragObs; bounceToDistance();',1);
}
}
function bounceToZero() {
if (dragObs > 0) {
dragObs--;
setTimeout('document.querySelector("pull-to-action").drag = dragObs; bounceToZero();',5);
}
}
window.addEventListener('load', function() {
var lastTouchY = 0;
var startTouchY = 0;
var endTouchY = 0;
var desat = 100;
var touchstartHandler = function(e) {
if (e.touches.length != 1) return;
lastTouchY = e.touches[0].clientY;
startTouchY = e.touches[0].clientY;
document.querySelector('pull-to-action').width = window.innerWidth;
}
var touchmoveHandler = function(e) {
var touchY = e.touches[0].clientY;
var touchYDelta = touchY - lastTouchY;
lastTouchY = touchY;
endTouchY = e.touches[0].clientY;
if (document.getElementById('{{container}}').scrollTop == 0) {
dragObs = endTouchY - startTouchY;
desat = 100 - ((dragObs / {{distance}}) * 100);
document.querySelector('pull-to-action').desat = desat;
document.querySelector('pull-to-action').drag = endTouchY - startTouchY;
}
if (document.getElementById('{{container}}').scrollTop == 0 && touchYDelta > 0) {
e.preventDefault();
return;
}
if (document.getElementById('{{container}}').scrollTop == 0 &&dragObs > 0) {
e.preventDefault();
return;
}
}
var touchendHandler = function(e) {
if (document.getElementById('{{container}}').scrollTop == 0 && endTouchY - startTouchY >= {{distance}}) {
{{action}};
bounceToDistance();
setTimeout('bounceToZero();', 2000);
} else {
bounceToZero();
}
}
document.addEventListener('touchstart', touchstartHandler, false);
document.addEventListener('touchmove', touchmoveHandler, false);
document.addEventListener('touchend', touchendHandler, false);
});
</script>
</template>
<script>
Polymer({
action: 'alert("You need to set the action attribute")',
distance: '100',
container: 'body',
drag: '0',
desat: '100',
color: '#ccc'
});
</script>
</polymer-element>