Question

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

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

目前我的XTemplate中有两个div，一个最初显示而另一个仍然隐藏。在滑动时，我隐藏了第一个div并通过更新div.style.display来显示第二个div。这样可以正常工作，除了隐藏的div没有动画，并且当你像旋转木马组件一样滑动时不会滑入视图。

那么有没有办法可以为数据视图中的每条记录添加轮播或启用水平滚动，以便使用滑动将另一个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();
                    }
                }
            }
        }
    });

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

Sencha Touch - 数据视图内的轮播或水平滚动？

1 个答案: