javascript – 通过重复创建聚合物滑动页面

前端之家收集整理的这篇文章主要介绍了javascript – 通过重复创建聚合物滑动页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试通过模板重复使用滑动页面. @H_403_2@<swipe-pages> <template is="dom-repeat" items="{{values}}"> <swipe-page> <div> Text to swipe </div> </swipe-page> </template> </swipe-pages>

在我写的聚合物中

@H_403_2@created: function() { console.log(this); this.values = [1,2,3]; }

它给了我错误

@H_403_2@Uncaught TypeError: Cannot set property 'values' of undefined Polymer.created Polymer.Base._addFeature._invokeBehavior Polymer.Base._addFeature._doBehavior Polymer.Base.createdCallback window.Polymer (anonymous function) Polymer.DomApi.DomApi._addNode

我不能让它工作.

也用

@H_403_2@ready:function(){this.values=[1,3];};

不起作用.在这种情况下,它会抛出异常,即它们是0页.

我认为在模板重复运行后,滑动页面不会收到输入.

如果我不是通过模板写它,它可以正常工作..

更新:

这是所有的聚合物元素.

@H_403_2@<dom-module id="element-element"> <template> <swipe-pages> <template is="dom-repeat" items="{{values}}"> <swipe-page> <div> text </div> </swipe-page> </template> </swipe-pages> </template> <script> Polymer({ is:'element-element',created: function() { this.values = [1,3]; },ready: function(){ this.values=[1,3]; } }); </script> </dom-module>

如果它们是聚合物的另一个滑动页面元素,可以动态改变,我将很高兴知道.

如果他们是一个黑客解决方案(如动态加载所有元素),它也可以

谢谢.

解决方法

快速修复是修改滑动页面的源代码.

首先,找到selectedChanged函数并在最顶部添加此检查 –

@H_403_2@selectedChanged: function (newValue,oldValue) { if (oldValue === undefined) { return; } if (newValue >= this.pageCount || newValue < 0) { ....

然后,因为过早调用resetPositions和resetWidths,您想要替换以下内容

@H_403_2@ready: function () { this.resetPositions(); this.resetWidths(); }

@H_403_2@attached: function () { this.async(function () { this.resetPositions(); this.resetWidths(); },5);

确保页面已经通过dom-repeat呈现.

最后,确保在ready或附加内部初始化阵列.

@H_403_2@ready: function() { console.log(this); this.values = [1,3]; }

应该这样做!

猜你在找的JavaScript相关文章