圖片輪播反發行
[英]Image carousel counter issue
問題描述
我正在嘗試將圖像輪播/滑塊升級到Polymer 1.0。 邏輯與我在Polymer 0.5中使用的邏輯相同。 但是，當我使用異步循環方法時，計數器似乎在增加2，或者說加1，然后在觸發異步之前又加了1。 這里似乎是什么問題？
為了更清楚一點：說我有一個計數器變量。 在舊版本中，它將像這樣打印。
1, wait 5 seconds, 2, wait 5s, 3, wait 5s,....
在新版本中，它是：
1,2, wait 5s, 3,4, wait 5s,....
舊版本（效果很好）
新版本（附發行）
<body>
<template is="dom-bind">
<div class="toolbar">
<button on-click="_onPrevClick"><<</button>
<button on-click="_onNextClick">>></button>
</div>
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>
<iron-image preload sizing="contain" src="img/heroimage1@2x.jpg"></iron-image>
</neon-animatable>
<neon-animatable>
<iron-image preload sizing="contain" src="img/heroimage2@2x.jpg"></iron-image>
</neon-animatable>
<neon-animatable>
<iron-image preload sizing="contain" src="img/heroimage3@2x.jpg"></iron-image>
</neon-animatable>
<neon-animatable>
<iron-image preload sizing="contain" src="img/heroimage4@2x.jpg"></iron-image>
</neon-animatable>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope.selected = -1;
scope.counter = 0;
scope.ready = function() {
//this.async(function() {
this.nextCount();
//});
}
scope.nextCount = function () {
if (this.selected < 3) {
this.selected = this.selected + 1;
} else {
this.selected = 0;
}
//console.log(this.selected);
this.counter++;
console.log(this.counter);
this.async(this.nextCount, 6000);
}
scope._onPrevClick = function() {
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
//this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
scope._onNextClick = function() {
this.entryAnimation = 'slide-from-right-animation';
this.exitAnimation = 'slide-left-animation';
//this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
</script>
</body>
2 個解決方案
解決方案1
0 2015-12-08 07:50:55
如注釋中所述，可能值得調查為什么在腳本中兩次調用了ready()函數。 嘗試在腳本中像這樣修改您的代碼：
window.addEventListener('WebComponentsReady', function(e) {
// your previous `<script>` code!
});
解決方案2
0 2015-12-08 10:23:53
dom-bind模板是唯一的后期綁定模板實例。 它旨在模仿Polymer元素的行為，但存在局限性-出於性能原因，Polymer 1.0+作為框架在元素注冊期間（即初始化時間，而不是0.5可以完成很多事情的時間）進行了大量接線即時）。 因此，我不確定dom-bind真正遵循影子DOM定義所指定的生命周期方法。
如果將代碼包裝在適當的dom-module ，然后從主文檔中調用它，那就更好了，這可以確保事情按照規范進行。
圖像輪播間隔問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.