html - Sencha Touch——数据 View 内的旋转木马或水平滚动？

Question

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

我有一个数据 View ，在滑动时我想将一些操作按钮滑入 View ，例如类似于 iOS 上的 Gmail 应用程序。

目前我的 XTemplate 中有两个 div，一个最初显示，另一个保持隐藏。滑动时，我隐藏第一个 div 并通过更新 div.style.display 显示第二个。这工作正常，除了隐藏的 div 没有动画并且不会像旋转木马组件一样滑动到 View 中。

那么有没有一种方法可以添加轮播或为数据 View 中的每条记录启用水平滚动以使用滑动将另一个 div 元素滑入 View ？

谢谢!

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();
                    }
                }
            }
        }
    });

唯一的问题是它无法处理滚动 - 不确定您是否需要支持它？您可以尝试在滚动条上重新定位，或者选择在所有可见按钮开始滚动时隐藏它们。