Question

我正在尝试创建一个水平滚动列表，可以向左或向右滑动（类似于Tinder，但可以选择回到之前的内容）

这是我想要创建的： http://postimg.org/image/5jcurf1q1

这是我迄今为止所能得到的： http://postimg.org/image/4o7h33w9h/

问题是我无法使数据视图项目保持在移动屏幕的范围内

到目前为止，我所做的是：

使用数据视图

将内联换行设置为false

inline: {
    wrap: false
}

将可滚动设置为＆＃39;水平＆＃39;

scrollable: 'horizontal'

设置以下布局：

layout: {
    type : 'vbox',
    pack : 'center',
    align: 'stretch'
},

为数据视图设置的CSS：

.dataview-base {
    background-color: #cacacd;
}

为数据视图项设置的CSS：

.dataview-item {
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-top: 5px solid #59535E;
    border-bottom: 5px solid #59535E;
    padding:20px;
    margin: 0px 20px 0px;
}

我如何实现我想要实现的目标？我很确定它与数据视图的CSS和数据视图项有关，但我不确定是什么？

任何帮助都将受到高度赞赏。

这是完整的Main.js视图

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.DataView'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                xtype: 'dataview',
                height: '100%',
                styleHtmlContent: true,
                inline: {
                    wrap: false
                },
                itemCls: 'dataview-item',
                baseCls: 'dataview-base',
                itemTpl: [
                    '<div class="arHeadline">',
                    '    {Headline}',
                    '</div>',
                    '<div class="arbyline">',
                    '    {Author}',
                    '</div>',
                    '<div class="arcontent">',
                    '    {Content}',
                    '</div>'
                ],
                store: 'Discovers',
                scrollable: 'horizontal',
                layout: {
                    type : 'vbox',
                    pack : 'center',
                    align: 'stretch'
                },
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Summary'
            }
        ]
    }
});

谢谢

Answer 1

我的建议是使用carousel代替dataview。您还可以将数据加载到其中：Loading a Carousel from a Store in Sencha Touch 2?

在Sencha Touch 2中创建可滚动数据视图

1 个答案: