Sencha touch 2 - 如何创建动态轮播？

Posted 2023-02-25

【中文标题】Sencha touch 2 - 如何创建动态轮播？

【英文标题】：Sencha touch 2 - How to create dynamic carousel?

【发布时间】：2012-02-24 13:40:32

【问题描述】：

Sench Touch 2 - 如何在sencha touch 2 中开发动态轮播？我想将商店中的每个元素显示为轮播中的单独卡片。

【参考方案1】：

Rdougan 给出了这个答案。我觉得不错。

http://web.archive.org/web/20121109164506/http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html

【讨论】：

谢谢你的抱怨。这解决了我的问题。但是，除了在 launch() 中写下所有内容之外，还有其他地方吗？就像一个在视图中的项目被渲染之前运行的监听器？。

我猜像“activeitemchange”这样的轮播监听器的代码可以移动到控制器中。即将自己解决这个问题...... Ed Spencer 的SenchaConDemo video 谈到了这一点。 Code on github

我在这里添加了一些控制器代码来捕获轮播事件：

Ext.define('MyApp.controller.CarouselController', extend: 'Ext.app.Controller', config: refs: carousel: 'carousel', init: function() // 在此处添加侦听器 this.control( // 到轮播 activate: function(carousel, newItem) console.log(newItem.id);, activeitemchange: function(carousel, newItem) console.log(newItem .id);，停用：function(carousel, newItem, oldItem) console.log(oldItem.id); ););

我也有同样的问题，但找不到解决方案，如何使用动态数据创建轮播。请访问：***.com/questions/18075538/…

【参考方案2】：

更新： My question 引用一些 Ed Spencer 代码现在有一个很好的答案。我还注意到新的候选版本 touchstyle 示例使用了从商店加载的无限轮播。

之前在这个频道上： 我昨天在Loading a Carousel from a Store in Sencha Touch 2? 提出了这个问题。还没有答案，但我注意到新的候选版本提供列表的水平滚动。所以我希望这可以提供一个相当于可以从商店加载的 Carousel。

【讨论】：

但它看起来不像 carousel 那样酷。对于动态 carousel，我们必须给 'items' 的值一个 'array' 。并且该数组的每个元素都应该是面板类型。这是用于创建动态轮播。但是我坚持在哪里初始化该数组，以便在加载轮播类之前执行它。因此，我的“阵列”在轮播之前就已经存在。你知道我们可以初始化 'array' 的任何函数。我正在使用 MVC。

同意 - 轮播看起来更好。

请看看这个。 sencha.com/forum/… 。这帮助我解决了我的问题。