Sencha Touch:嵌套列表滚动到顶部,我该如何禁用它?

Posted

技术标签:

【中文标题】Sencha Touch:嵌套列表滚动到顶部,我该如何禁用它?【英文标题】:Sencha Touch: Nested list scrolls to top on Back, how can I disable this? 【发布时间】:2018-09-05 13:19:37 【问题描述】:

我有一个有效的嵌套列表。 当我通过单击后退按钮向后导航时,它会正确加载上一个列表,但默认值似乎会将其滚动到顶部。

这很烦人,因为假设我单击列表项 #50 并单击返回,它应该显示位于我所在位置的列表(在第 50 项)而不是在第 1 项向上滚动。它迫使我向下滚动一直到第 50 项继续探索我在哪里。

那么有没有办法取消嵌套列表的“滚动到顶部”行为?任何在代码中破解这个的方法都值得赞赏

【问题讨论】:

【参考方案1】:

是的,您可以在NestedList 中的back 事件中为您的列表使用方法scrollToRecord()。像这样

lastActiveList.scrollToRecord(node)

另一种方式

您可以使用getScrollable() 设置上一个滚动位置。您需要在NestedList 上使用itemtapback 事件。

itemtap 上,您将获得当前滚动位置并设置到您当前的活动列表中

list.yPosition = list.getScrollable().getScroller().position.y;

在后退按钮上,您可以再次将相同的先前滚动位置设置到您的列表中。

lastActiveList.getScrollable().getScroller().scrollTo(0, lastActiveList.yPosition);

您可以检查与工作FIDDLE

代码片段

Ext.application(
    name: 'Sencha',

    launch: function() 

        Ext.define('ListItem', 
            extend: 'Ext.data.Model',
            config: 
                fields: ['text']
            
        );

        Ext.create('Ext.data.TreeStore', 
            model: 'ListItem',

            storeId: 'listItemStore',

            defaultRootProperty: 'items',
            root: 
                items: items
            
        );

        Ext.create('Ext.NestedList', 

            fullscreen: true,

            store: 'listItemStore',

            listeners: 

                itemtap: function(tree, list, index, target, record, e, eOpts) 
                    list.yPosition = list.getScrollable().getScroller().position.y;
                ,

                back: function(btn, node, lastActiveList) 
                    lastActiveList.getScrollable().getScroller().scrollTo(0, lastActiveList.yPosition);
                
            
        );
    
);

【讨论】:

嗨,感谢您的回答,但是如果我导航超过一个级别,您提供的小提琴不会返回到位置 我已经更新了我的答案,你可以在 fiddle 上查看 如果我点击 27,然后点击第一个元素,然后点击第一个元素,然后返回,它应该在 27,但是列表在 1 还是同样的问题,它只记得一层深 我已经检查了相同的 27,我还创建了一个级别,然后再次返回主列表,但在 27 上相同。您可以打开控制台,我已经记录了所有深层级别的滚动位置跨度>

以上是关于Sencha Touch:嵌套列表滚动到顶部,我该如何禁用它?的主要内容,如果未能解决你的问题,请参考以下文章

嵌套列表返回按钮 sencha touch 2

Sencha Touch 1 的嵌套列表无限循环

Sencha Touch 2:给嵌套列表叶节点一个不同的 itemTpl

Sencha Touch 2:在选项卡面板中创建嵌套列表

sencha touch 2.2.1 检查控制器中的商店是不是为空?

Android 嵌套滚动NestedScrollView+TabLayout+ViewPager+Fragment+RecyclerView 实现京东美团首页效果Tab页滚动到顶部时自动吸附