SENCHA触摸 - 旋转木马或水平滚动Dataview

Question

我使用现代（sencha touch）工具包具有ExtJS 6.0.2应用程序。

我有一个数据范围，在刷卡后，我想将一些操作按钮滑入视图，例如，类似于iOS上的Gmail应用程序。

目前，我的Xtemplate中有两个div，一个最初显示，而另一个则隐藏。滑动后，我隐藏了第一个div，并通过更新div.style.display显示第二个DIV。除了隐藏的div没有动画，并且在您像旋转木马组件一样滑动时，这也可以正常工作。

。

因此，有一种方法可以添加旋转木马或启用数据维图中的每个记录的水平滚动，以使用Swipe将另一个DIV元素滑入视图？

谢谢！

Answer 1

这似乎解决了问题。

    Ext.create('Ext.dataview.DataView', {
        fullscreen: true,
        itemTpl:
            '<div style="height: 64px; border-bottom:1px solid black;">{name}</div>',
        data: data,
        listeners:{
            swipe:{
                element:'element',
                delegate:'.x-dataview-item',
                fn:fn:function(event,target){
                    if(event.direction==='left'){
                        var target=Ext.get(target);
                        var button=Ext.create('Ext.Button',{
                            text:'Boo',
                            height:64,
                            width:200,
                            floated:true,
                            handler:function(button){this.hide()},
                            showAnimation:{
                                type:'slideIn',
                                 from: {
                                   top: target.getY()
                                 },
                            },
                            hideAnimation:{
                                type:'slideOut',
                                direction:'right'
                            }
                        });
                        this.add(button);
                        button.show();
                    }
                }
            }
        }
    });

唯一的问题是不适合滚动 - 不确定您是否需要支持？您可以尝试在滚动上重新定位，或者选择在开始滚动时隐藏任何可见按钮。